javascript - 在 div 中使用换行符而不是 \n 打印 JS 对象

Question

我在 div 中打印一些 JS 对象。JS 对象的键值是带有换行符的字符串。

细绳

one
two
three

div 中的期望值：

one
two
three

我在 div 中得到了什么

one\ntwo\nthree

代码：

const textarea = document.querySelector("#textarea");
const log = document.querySelector("#log");

textarea.addEventListener('keypress', (event)=>{
	log.innerHTML = JSON.stringify({name:event.target.value});
});

<div id="log"></div>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

标签： javascript

Answer 1

JSON 中不允许使用换行符；JSON.stringify永远不会产生带有文字换行符的字符串。使用换行符对某些内容进行字符串化将导致输出字符串包含文字反斜杠字符，后跟文字n字符，这就是您在此处看到的内容。

如果您确实需要JSON.stringify，请将其中的所有\ns 替换为实际的换行符。

另一个问题是，对于大多数元素，换行符通常不会在呈现的 HTML 中产生实际的换行符。您可以使用 a<pre>而不是 a <div>，因为<pre>s确实将其内容中的换行符呈现为实际的换行符：

const textarea = document.querySelector("#textarea");
const log = document.querySelector("#log");

textarea.addEventListener('keypress', (event) => {
  log.textContent = JSON.stringify({
    name: event.target.value
  })
    .replace(/\\n/g, '\n');
});

<pre id="log"></pre>
<br>
<textarea name="" id="textarea" cols="30" rows="10"></textarea>

（请记住，#log元素的内容将不是有效的 JSON - 您将无法复制其内容和JSON.parse它）