Question

虽然听起来很傻，但我仍然没有找到合适的答案。

假设我想动态创建一个新的DOM元素并填充其textContent / innerText 用JS字符串文字。
字符串太长了我想把它分成三个块：

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

问题是，如果我写

h1.textContent = "...I would like to insert a carriage return here... \n";

它不起作用，可能是因为浏览器认为'\ n'是纯文本并且显示为纯文本（\ r \ n也不起作用）。

另一方面，我可以更改h1.innerHTML而不是textContent并写：

h1.innerHTML = "...I would like to insert a carriage return here...<br />";

这里＆lt; br /＆gt;会做的工作，但这样做不仅会取代文本内容，而且会取代我h1的所有HTML内容，这不是我想要的。

有没有一种简单的方法可以解决我的问题？
我不想创建多个块元素只是为了让文本在不同的行上。
任何想法将不胜感激。
提前谢谢。

Answer 1

我很久以前就知道这个问题。

前几天我遇到过类似问题，以json格式传递来自网络服务的价值，并将其放在table cell contentText 中。

因为值以格式传递，例如"text row1\r\ntext row2"等等。

对于textContent中的新行，您必须使用\r\n，最后，我必须使用css white-space: pre-line;（文本将在必要时包装，并在换行符时），一切顺利精细。

或者，您只能使用white-space: pre;，然后文本将仅换行换行符（在本例中为\r\n）。

所以，有一个例子，如何通过仅在换行符上包装文本来解决它：

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');

//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";

document.body.appendChild(h1);

Answer 2

我刚才遇到过这个问题。我发现一个很好的解决方案是使用回车的ASCII表示（代码13）。 JavaScript有一个名为String.fromCharCode()的便捷功能，它可以生成ASCII代码的字符串版本，或者用逗号分隔的多个代码。就我而言，我需要从长字符串生成CSV文件并将其写入文本区域。我需要能够从文本区域剪切文本并将其保存到记事本中。当我尝试使用<br />方法时，它不会保留回车符，但是，使用fromCharCode方法它会保留返回值。请参阅下面的代码：

h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);

有关此方法的详情，请参阅此处：w3Schools-fromCharCode()

请参阅此处获取ASCII码：ASCII Codes

Answer 3

您可以使用正则表达式将'\ n'或'\ n \ r'字符替换为'＆lt; br /＆gt;'。

你有这个：

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

你可以像这样替换你的角色：

h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');

检查String和Regex对象的javascript参考：

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Answer 4

你可以连接字符串......

h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";

jsFiddle.

Answer 5

使用element.innerHTML="some \\\\n some";。

Answer 6

以上解决方案均不适合我。我正在尝试向<p>元素添加换行符和其他文本。我通常使用Firefox，但我确实需要浏览器兼容性。我读到只有Firefox支持textContent属性，只有Internet Explorer支持innerText属性，但都支持innerHTML属性。但是，既不会将<br />也不会\n或\r\n添加到任何这些属性中，都会产生新行。但是，以下工作确实有效：

<html>
<body>
<script type="text/javascript">
  function modifyParagraph() {

  var p;
  p=document.getElementById("paragraphID");
  p.appendChild(document.createElement("br"));
  p.appendChild(document.createTextNode("Additional text."));
}    
</script>

<p id="paragraphID">Original text.</p>

<input type="button" id="pbutton" value="Modify Paragraph" onClick="modifyParagraph()" />
</body>
</html>

Answer 7

我发现插入\\n有效。即，你逃脱了转义的新行字符

Answer 8

以下代码效果很好（On FireFox，IE和Chrome）：

{{1}}

Answer 9

nelek的答案是迄今为止发布的最好的答案，但它依赖于设置css值：white-space：pre，这可能是不受欢迎的。

我想提供一个不同的解决方案，试图解决应该在这里提出的真正问题：

＆＃34;如何将不受信任的文本插入DOM元素？＆＃34;

如果您信任该文本，为什么不使用innerHTML？

domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '<br>');

对于所有合理的案件，

应该足够了。

如果你决定使用.textContent而不是.innerHTML，那就意味着你不相信你即将插入的文本，对吧？这是一个合理的担忧。

例如，您有一个表单，用户可以在其中创建帖子，发布后，帖子文本存储在您的数据库中，稍后在其他用户访问相关页面时附加到页面上。

如果您在此处使用innerHTML，则会出现安全漏洞。即，用户可以发布类似

的内容

[script]alert(1);[/script]

（试着想象[]是＆lt;＆gt;，显然堆栈溢出是以不安全的方式附加文本！）

如果你使用innerHTML，它不会触发警报，但它应该让你知道为什么使用innerHTML会有问题。一个更聪明的用户会发布

[img src="invalid_src" onerror="alert(1)"]

会触发访问该页面的每个其他用户的警报。现在我们遇到了问题。一个更聪明的用户会在img风格上放置display：none，并将当前用户的cookie发布到跨域网站。恭喜，您的所有用户登录详细信息现已公开在互联网上。

因此，要理解的重要一点是，使用innerHTML并不错，如果您只是使用它来构建仅使用您自己的可信开发人员代码的模板，那么它就是完美的。真正的问题应该是＆＃34;如何在HTML文档中添加包含换行符的不受信任的用户文本＆＃34;。

这提出了一个问题：我们将哪种策略用于换行？我们使用[br]元素吗？ [p] s或[div] s？

这是一个解决问题的简短函数：

function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
    domElement.innerHTML = '';
    var lines = untrustedText.replace(/\r/g, '').split('\n');
    var linesLength = lines.length;
    if(newlineStrategy === 'br') {
        for(var i = 0; i < linesLength; i++) {
            domElement.appendChild(document.createTextNode(lines[i]));
            domElement.appendChild(document.createElement('br'));
        }
    }
    else {
        for(var i = 0; i < linesLength; i++) {
            var lineElement = document.createElement(newlineStrategy);
            lineElement.textContent = lines[i];
            domElement.appendChild(lineElement);
        }
    }
}

你基本上可以把它放在你的common_functions.js文件中的某个地方，然后只需要在你需要附加任何用户/ api / etc时触发并忘记 - ＆gt;不受信任的文本（即不是由您自己编写的开发人员团队）到您的html页面。

用法示例：

insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');

参数newlineStrategy只接受有效的dom元素标签，所以如果你想要[br]换行符，请传递＆＃39; br＆＃39;如果你想要[p]元素中的每一行，请传递＆＃39; p＆＃39;等。

Answer 10

将 h1.textContent 更改为 h1.innerHTML 并使用 <br> 转到新行。

Answer 11

我遇到了这个问题，在按照 Nelek 的回答添加了 css 样式后，我设法让它与模板字符串一起工作。我想在从其他元素中提取和显示数据时使用模板字符串。

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent.  

    h1.setAttribute('style', 'white-space: pre;');

// Using backticks worked for me after adding the css styling

    h1.textContent = `
       Hello, my name is
       ${name.firstName()} ${name.lastName()}.
       Today is
       ${date}.
    `;

document.body.appendChild(h1);

如何将新行/回车符插入element.textContent？

11 个答案: