使用“.text”或“.textContent”时保留换行符。可能的？备择方案？解决方法？答案

【问题标题】：Preserving Newlines When Using ".text" or ".textContent". Possible? Alternatives? Workarounds?使用“.text”或“.textContent”时保留换行符。可能的？备择方案？解决方法？
【发布时间】：2014-01-10 00:12:59
【问题描述】：

如果我从一个元素中获取一些 html，然后尝试将其分配为另一个元素的文本内容，则不保留换行符（至少在最新的 Firefox 和 Chromium 中没有）。

因此，例如，以下代码（带有合理的 html）会生成换行符被空格替换的输出。好吧，除了警报，它按预期工作。

$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });

这是一个运行示例：http://jsfiddle.net/76S7z/2/

应该有一些方法可以将一个元素的 html 设置为另一个元素的文本，同时正确保留换行符。

“text”或“textContent”可以做到这一点吗？有没有其他方法可以做到这一点？有简单的解决方法吗？一个不太简单的解决方法？

【问题讨论】：

“换行符”是指br 元素？或 HTML 中的实际换行符（无论如何都不会呈现）。也许您正在寻找使用.html 而不是.text 来设置内容。来自.text 文档：“我们需要注意，此方法会根据需要对提供的字符串进行转义，以便它在 HTML 中正确呈现”，这就是 <br> 所发生的情况。跨度>
不，不是在寻找“.html”。我非常特别希望将一个元素的 html 设置为另一个元素的文本。老实说，文字。
好吧，您正在抓取 HTML，并且新行通过 HTML (br) 表示。不是 \r 或 \n，因此当您执行 .text 时，它将去除所有 br 标记。您可以尝试将所有
暂时替换为某些内容，然后在移动 text/html 后将它们切换回来。还取决于您将其移动到哪种类型的元素，这取决于您如何恢复换行符。
我目前正在玩的想法是先使用 str.split("\n") 然后再使用 arr.join("\n")。
确定或执行 str.replace('\n','!~![somethingunique]') 然后在设置其他元素文本值后执行相反的操作。许多可用的选项你只需要知道换行符在你正在操作的字符串中是如何表示的，因为它可能是 str.split("
")。

标签： javascript jquery html

【解决方案1】：

正如您已经确定的那样，Web 浏览器通常不会将换行符 \n 呈现为换行符。如果您拒绝添加换行元素<br />，您可以使用white-space CSS 属性，其值为pre-line，这将：

空格序列被折叠。在换行符、<br> 处换行，并根据需要填充行框。

使用前请务必检查属性的兼容性表。

<div style="white-space: pre-line;">
    Look

    at
    these line breaks!
</div>

Here's a JSFiddle example.

【讨论】：