如何在HTML中输出无格式文本？已尝试<pre>与废弃<plaintext>标签

想在HTML里输出带\n的原始文本，要求直接显示\n符号，不能让它解析成换行。试过已经废弃的<plaintext>标签和<pre>标签，都没达到预期效果。

相关代码 #

期望显示效果 #

最终要呈现的内容：

'text \nwithout \nformatting '

JavaScript代码 #

const editor = document.getElementById('editor')
const previewer = document.getElementById('previewer')

editor.addEventListener('change', () => {
  previewer.textContent = editor.value
})

HTML代码 #

<textarea id="editor" name="" cols="30" rows="10"></textarea>
<pre id="previewer"></pre>

核心问题是：当你在textarea里敲换行，editor.value会把这个换行转换成换行字符（不是字面的\n字符串），直接赋值给预览区就会显示成换行。要让它显示\n，得把换行符替换成\n字符串，同时把监听事件换成input能实时响应输入：

修改后的JavaScript代码：

const editor = document.getElementById('editor')
const previewer = document.getElementById('previewer')

editor.addEventListener('input', () => {
  // 把所有换行符替换成字面量的 \n
  const rawText = editor.value.replace(/\n/g, '\\n');
  previewer.textContent = rawText;
})

如果你的文本里本来就有转义后的\n（也就是字符串里的\\n），直接用textContent就能正确显示\n；但如果是实际的换行符，就必须用上面的替换方法。

内容的提问来源于stack exchange，提问作者Fernando Castro