jQuery text() 和换行符答案

【问题标题】：jQuery text() and newlinesjQuery text() 和换行符
【发布时间】：2011-05-30 23:17:17
【问题描述】：

我想能够说

$(someElem).text('this\n has\n newlines);

它在浏览器中使用换行符呈现。我发现的唯一解决方法是在 someElem 上将 css 属性“white-space”设置为“pre”。这几乎可以工作，但是我在文本和 someElem 的顶部之间有一个令人讨厌的大填充，即使我将填充设置为 0。有没有办法摆脱这个？

【问题讨论】：

在我看来，用<pre>标签包装它（并使用.html()而不是.text()）是维护文本文件或纯文本换行符的最简单和最好的解决方案（这是由下面卡里姆的回答提出的）。但是：更新的替代方法是使用 white-space: pre-wrap;，正如 cleong 的回答中所建议的那样
为什么不用append() 而不是test() 和<br/> 而不是\n？像这样 - $(someElem).append("this <br/> has <br/> newlines");

标签： javascript jquery html

【解决方案1】：

现在是 2015 年。此时此问题的正确答案是使用 CSS white-space: pre-line 或 white-space: pre-wrap。干净优雅。支持该对的 IE 最低版本是 8。

https://css-tricks.com/almanac/properties/w/whitespace/

附： ~~在 CSS3 变得普遍之前~~，您可能需要手动修剪初始和/或尾随空格。

【讨论】：

我同意你的前提，除了我们中的一些人没有幸运地拥有让我们（容易）任意定制 CSS 的系统。例如，我正在维护一个 LightSwitch 系统，该系统需要我在渲染后的 javascript 中进行所有自定义，所以这是另一段奇怪的幕后代码。
如果您将预包装的内容从浏览器复制粘贴到文字处理器 -> 换行符会丢失
这是处理多行文本输出的一个很好的解决方案。 MDN - white-space
我有点困惑，这个答案如何让您“控制”中断发生的位置？这个答案不是简单地整合换行吗？当 OP 说他们已经尝试过并且没有达到他们想要的效果时，这怎么可能是答案？

【解决方案2】：

如果你将 jQuery 对象存储在一个变量中，你可以这样做：

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

如果你愿意，你也可以通过一个简单的调用来创建一个函数，就像 jQuery.text() 一样：

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

【讨论】：

第一个代码sn-p的第二行缺少右括号。
这实际上回答了 OP 的问题
最好的，像魅力一样工作并解决了问题。

【解决方案3】：

这是我使用的：

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

【讨论】：

事实上，它优于 Mark 的建议，因为它不存在 XSS 攻击的风险。
我认为您可以从函数中创建 div（即：document.createElement('div')）并将其用于所有调用，对吗？
@FabioZadrozny：是的，你是对的！我已经（几乎）相应地编辑了答案。 div 在函数内部创建，但现在在循环外部。它可能完全在函数之外，但是使用起来很麻烦。
我相信@cleong 的回答是最好的解决方案
如果您的文本中有明确的换行符，那么您可能希望使用text.split(/\\n/) 甚至text.split(/\\\\n|\\n|\n/) 进行拆分。我在使用在字符串中嵌入文字 \n 控制字符的 API 传递 JSON 格式的文本时遇到了这个问题。

【解决方案4】：

或者，尝试使用.html，然后wrap和<pre>标签：

$(someElem).html('this\n has\n newlines').wrap('<pre />');

【讨论】：

这是我使用的，我使用的是 .text 而不是 .html

【解决方案5】：

您可以使用html 代替text，并将每次出现的\n 替换为<br>。不过，您必须正确转义您的文本。

x = x.replace(/&/g, '&amp;')
     .replace(/>/g, '&gt;')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

【讨论】：

阅读此答案的某些人可能不知道这有多危险。切勿将此解决方案与用户提供的文本一起使用。 Peter Mørch 的解决方案更可取。
@kulebyashik Peter 的解决方案使用text，而这个答案直接使用html。

【解决方案6】：

试试这个：

$(someElem).html('this<br> has<br> newlines);

【讨论】：

【解决方案7】：

我建议直接使用 someElem 元素，因为替换为 .html() 也会替换字符串中的其他 HTML 标记。

这是我的功能：

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

调用方式：

someElem = nl2br(someElem);

【讨论】：

读者注意：如果您计划开发 Firefox 插件，这个答案特别有用。 W3C 和 Mozilla 不赞成 innerHTML 或（如果使用 jQuery，则为 .html()），上面的代码对于清除审查过程非常有帮助。有关详细信息，请参阅安全注意事项@developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

【解决方案8】：

使用 CSS white-space 属性可能是最好的解决方案。使用 Firebug 或 Chrome 开发者工具来确定您看到的额外填充的来源。

【讨论】：

【解决方案9】：

对我来说，它在使用 jquerys .html() 函数而不是 .text() 函数时有效。然后你可以为换行添加
。

var msg = someString + "<br/>" + anotherString;
$(elem).html(msg);

【讨论】：