JQuery text()和换行符

我想说

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

并在浏览器中使用换行符进行渲染。我找到的唯一解决办法是在一些 Elem 上将 css 属性“ white-space”设置为“ pre”。这几乎可以工作，但是在文本和一些 Elem 的顶部之间有一个令人讨厌的大空白，即使我将空白设置为0。有办法处理掉这个吗？

184580 次浏览
小开

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

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

或者，尝试使用 .html，然后使用带有 <pre>标签的 包装:

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

以下是我使用的方法:

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

使用 CSS 空白属性可能是最好的解决方案。使用 Firebug 或 Chrome 开发工具来识别您看到的额外填充的来源。

小开

如果将 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>

小开

我建议直接使用 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);
小开

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

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

附注: 直到 CSS3变得普遍你可能需要手动去掉初始和/或尾随的空格。

小开

试试这个:

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

对我来说，当使用 jquerys.html ()函数而不是. text ()函数时，它可以工作。 然后可以为换行添加 < br/> 。

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

提交答案