如何在 HTML 标记中显式显示换行符<textarea>"n"？

Question

我正在编写一个简单的Web应用程序，它将纯文本转换为python代码。

例： 这是我的纯文本---->打印("这是我的纯文本"(

纯文本存储在常规文本区域中。输出文本存储在禁用的文本区域中。

问题： HTML 会自动解析，但我还没有找到将保留在输出文本区域中的好方法。这是一个问题，因为复制输出文本区域内的内容无法正常工作。

这是我正在尝试做的：

输入： EoL 酒吧

输出： print("FooBar"(

---

源代码：

function set(el, text) {
while (el.firstChild) el.removeChild(el.firstChild);
el.appendChild(document.createTextNode(text))
}
/* setupUpdater will be called once, on page load.
*/
function setupUpdater() {
var input = document.getElementsByTagName('textarea')[0],
output = document.getElementsByTagName('textarea')[1],
timeout = null;
function handleChange() {
//string.replace(/[n]/g, 'n')
var inputText = input.value;
set(output, "print("" + inputText + "")");
("n");
}
/* eventHandler is called on keyboard and mouse events.
If there is a pending timeout, it cancels it.
It sets a timeout to call handleChange in 0ms. */
function eventHandler() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(handleChange, 0);
}
input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}
setupUpdater();
document.getElementsByTagName('textarea')[0].focus();

<div class="grid-container">
<textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"></textarea>
<textarea name="plainText" id="plainText" cols="40" rows="40" readonly>print("")</textarea>
</div>

我很乐意澄清任何我无法解释的事情，但我确实希望这个问题和我想要实现的目标很清楚。

Answer 1

.replace

不会改变现有字符串 - 您需要以某种方式使用生成的表达式，例如将其与您正在创建的print屏幕连接起来。

要将换行符替换为n，请用/n/g搜索换行符并替换为\n(文字反斜杠，后跟文字n(。

您还应该将"s 替换为"：

set(output, `print("${input.value.replace(/n/g, '\n').replace(/"/g, '\"')}")`);

function set(el, text) {
while (el.firstChild) el.removeChild(el.firstChild);
el.appendChild(document.createTextNode(text))
}
/* setupUpdater will be called once, on page load.
*/
function setupUpdater() {
var input = document.getElementsByTagName('textarea')[0],
output = document.getElementsByTagName('textarea')[1],
timeout = null;
function handleChange() {
set(output, `print("${input.value.replace(/n/g, '\n').replace(/"/g, '\"')}")`);
}
/* eventHandler is called on keyboard and mouse events.
If there is a pending timeout, it cancels it.
It sets a timeout to call handleChange in 0ms. */
function eventHandler() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(handleChange, 0);
}
input.onkeydown = input.onkeyup = input.onclick = eventHandler;
}
setupUpdater();
document.getElementsByTagName('textarea')[0].focus();

<div class="grid-container">
<textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here">foo"bar</textarea>
<textarea name="plainText" id="plainText" cols="40" rows="40" readonly>print("")</textarea>
</div>

Answer 2

您可以将字符串替换方法与正则表达式一起使用，以匹配所有，如下所示：

const output = inputText.replace(/n/g, '\n')

Answer 3

你的代码很好。 只需替换

var inputText = input.value;
with 
var inputText = input.value.split(' ').join('\n');