如何在 element.textContent 中插入换行符/回车符？

Posted 2023-02-16

【中文标题】如何在 element.textContent 中插入换行符/回车符？

【英文标题】：How can I insert new line/carriage returns into an element.textContent?

【发布时间】：2012-04-16 08:22:09

【问题描述】：

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

假设我想动态创建一个新的 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 也不起作用）。

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

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

这里 可以完成这项工作，但这样做不仅会替换文本内容，还会替换我 h1 的所有 HTML 内容，这不是我想要的 .

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

【问题讨论】：

在标题元素中插入换行符的问题是你不能确定标题不会在其他地方换行，尤其是在视口很小的情况下。

为什么要添加换行符？你想看看渲染的线条是否中断？

【参考方案1】：

我知道这个问题很久以前发布了。

几天前我遇到了类似的问题，以json格式从网络服务传递值并将其放入tablecellcontentText。

因为值是以格式传递的，比如"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);

【讨论】：

大声笑，这个答案是这个问题的唯一正确答案，但它的投票不足，直到现在还没有 cmets... 看来这里的人无法正确阅读。问题是关于使用textContent。使用 CSS 是解决它的另一种方法（也许是最干净的）。如此完美的答案。谢谢！

这确实是一种魅力。我有一个文本区域，可以用新行分割文本，这就是解决方案

【参考方案2】：

我不久前遇到过这个问题。我发现一个好的解决方案是使用回车的 ASCII 表示（CODE 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

【讨论】：

这完全是错误的，在很多层面上。 13 是回车。它可以等效地写为'\r'（'\r' === String.fromCharCode(13) 为真）。除非您使用的是 Classic Mac，否则换行符是错误的字符。换行符是 ASCII 10，或 '\n'。然而，在 HTML 中，唯一的换行符是 <br/>。 \r 和 \n 都呈现为空间，<pre> 除外。 innerText 和 innerHtml 但是为了方便起见，将这两个字符都转换为 <br/>，所以它恰好可以工作。我没有检查规范是否按设计工作（我不会相信那么多）。

旧答案，我可能错了，但这如何解决问题？我有同样的问题，问题是关于使用textContent，而不是innerHTML。

对于将文本复制到剪贴板的具体情况，这在我测试过的所有浏览器中都能完美运行。使用 '\n' 会根据浏览器给出不同的结果。

这是唯一对我有用的方法，到目前为止，我尝试了针对该问题发布的所有 10 种不同的解决方案。

【参考方案3】：

您可以使用正则表达式将“\n”或“\n\r”字符替换为“”。

你有这个：

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

【参考方案4】：

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

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

“如何在 DOM 元素中插入不受信任的文本？”

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

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

对于所有合理的情况应该足够了。

如果您决定应该使用 .textContent 而不是 .innerHTML，这意味着您不信任要插入的文本，对吗？这是一个合理的担忧。

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

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

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

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

如果您使用innerHTML，它不会触发警报，但它应该让您了解为什么使用innerHTML 会出现问题。更聪明的用户会发帖

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

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

因此，重要的是要了解，使用 innerHTML 并没有错，如果您只是使用它来构建模板，并且只使用您自己受信任的开发人员代码，那就完美了。真正的问题应该是“如何将具有换行符的不受信任的用户文本附加到我的 HTML 文档中”。

这提出了一个问题：我们对换行使用哪种策略？我们使用 [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 时触发并忘记 -> 不受信任的文本（即不是由您自己的开发者编写的 -团队）到您的 html 页面。

用法示例：

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

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

【讨论】：

如何根据 textContent 显示额外的空格？  在这里不起作用。

@krave 支持更多空白字符，您必须扩展函数以熟悉它们

【参考方案5】：

您可以连接字符串...

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.

【参考方案6】：

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

【讨论】：

我的用例中的最佳答案。

【参考方案7】：

以上解决方案都不适合我。我试图向<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>

【讨论】：

如您所见，如果您再次阅读问题，这不是关于 innerHTML 而是 textContent ...用户对 innerHTML 没有问题。 ..那么，这个解决方案如何正确？所有解决方案都基于innerHTML，但没有一个textContent ...它们不一样。

我认为使用 textContent 无法解决问题，因此我没有提供证据和文件证明问题无法解决，而是提供了替代方案。在我看来，没有答案的问题是无用的，而且答案往往不是我们认为的。

为什么无法解决？想象一下：我想为div 元素设置contenteditable（现在不管为什么）......你将如何使用javascript 用新行解决这个问题？而且，在这种情况下，innerHTML 的目的是什么？这就是为什么有些人使用textContent/innerText 而关于innerHTML 的一切都不再有任何用途了。这就是textContent/innerText 的重点。而且，无论如何，就像你看到的那样，它是可以解决的。

【参考方案8】：

我发现插入\\n 有效。即，您转义转义的换行符

【参考方案9】：

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

【参考方案10】：

以下代码运行良好（在 FireFox、IE 和 Chrome 上）：

var display_out = "This is line 1" + "<br>" + "This is line 2";

document.getElementById("demo").innerHTML = display_out;

【参考方案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);