Javascript jQuery text（）和换行符

我想说

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

并在浏览器中使用换行符进行渲染。我发现的唯一解决方法是在someElem上将css属性“空白”设置为“pre”。这几乎可以实现，但是在文本和someElem顶部之间有一个令人恼火的大填充，即使我将padding设置为0。有什么方法可以消除这种情况吗？

您可以使用而不是

文本

，并将每次出现的

\n

替换为

。不过，您必须正确地转义文本

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

x=x.replace（/&/g，&；）
.替换（/>/g''）
。替换（/或者，尝试使用
.html
然后用
标记换行：

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

$（someElem.html（'this\n has\n newlines'）.wrap（''）；
以下是我使用的：

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;
}

函数htmlForTextWithEmbeddedNewlines（文本）{
var htmls=[]；
变量行=text.split（/\n/）；
//临时任务是可靠地执行HTML实体编码。
//
//document.createElement（）比jQuery（“”）快*多*
// http://stackoverflow.com/questions/268490/
//
//您不需要jQuery，但需要与浏览器进行斗争
//innerText/textContent中的差异
var tmpDiv=jQuery（document.createElement（'div'）；
对于（变量i=0；i”）；
}
jQuery（'#div'）.html（HtmlFortexwithEmbeddedNewlines（“hello\nworld”）；
使用CSS空白属性可能是最好的解决方案。使用Firebug或Chrome Developer工具来识别所看到的额外填充的来源。
如果将jQuery对象存储在变量中，则可以执行以下操作：


var obj=$（“#示例”）.text（'this\n有\n新行'）；
html（obj.html（）.replace（/\n/g，
）；

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

以下是我的功能：

someElem = nl2br(someElem);

2015年。在这一点上，这个问题的正确答案是使用CSS
空白：pre-line
或
空白：pre-wrap
。干净优雅。支持这对的IE最低版本是8


注意：在CSS3变得普遍之前，您可能需要手动删除初始和/或尾随空格。
尝试以下方法：

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

$（someElem.html（'this
有
换行符）；
对我来说，当使用jquerys.html（）函数而不是.text（）函数时，它会起作用。
然后可以为换行符添加

var msg=someString+“
”+另一个字符串；
$（elem）.html（msg）；
@Matthew Flaschen:谢谢，修正了。一些阅读此答案的人可能不知道这有多危险。永远不要在用户提供的文本中使用此解决方案。Peter Mørch的解决方案更可取。@kulebyashik Peter的解决方案使用
文本
，而此答案直接使用
html
。事实上，它优于Mark的建议因为它没有遭到XSS攻击的风险。我认为你可以从函数中创建div（即：document.createElement（'div'）），并将其用于所有调用，对吗？@FabioZadrozny:是的，你说得对！我已经编辑了答案（几乎）因此，div是在函数内部创建的，但现在在循环外部。它可能完全在函数外部，但使用起来会很麻烦。我相信@cleong的答案是最好的解决方案。如果文本中有明确的换行符，那么您可能希望使用
text.split（/\\n/）进行拆分
，甚至
text.split（/\\\\n\\\\n\\\n/）
。我在用一个API传递JSON格式的文本时遇到了这个问题，该API在字符串中嵌入了literal
\n
控制字符。在第一个代码段的第二行中缺少一个右括号。这实际上回答了OPs问题最好的一个，很有魅力，解决了这个问题。读者注意：Thi如果您计划开发Firefox加载项，那么它的答案特别有用。W3C和Mozilla不赞成使用innerHTML或（.html（），如果使用jQuery），上面的代码对清除审阅过程非常有帮助。有关更多信息，请参阅安全注意事项@使用
标记包装它（并使用.html（）而不是.text（））在我看来，这是从文本文件或纯文本中维护换行符的最简单和最好的解决方案（Karim在下面的回答中建议了这一点）。然而，较新的替代方法是使用
空白：预包装；
，正如cleong在回答中建议的那样为什么不使用
append（）
而不是
test（）
和

而不是
\n
？像这样-
$（someElem）.append（“这
有
新行”）
这应该是答案。这是答案。应该更高。欢迎来到2016年。在2017年发现这一点：仍然相关，仍然是问题的答案。这篇文章中有一个错误。年份是2017年，而不是2015年。其他一切看起来都很准确。
新日期（“2016”）；
这是我所用的，我使用的是.text而不是.html
$(someElem).html('this<br> has<br> newlines);

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