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

几天前我遇到了类似的问题，以json格式从 Web 服务传递值并将其放入table cell contentText.

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

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

或者，您可以使用 onlywhite-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);

不久前我遇到了这个问题。我发现一个很好的解决方案是使用回车的 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 代码

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

你有这个：

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

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 发布到跨域站点。恭喜，您的所有用户登录详细信息现在都已在 Internet 上公开。

因此，要理解的重要一点是，使用 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' 等。

您可以连接字符串...

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 />";

js小提琴。