为 jQuery 使用 .text() 方法时如何保持换行符？
Posted
技术标签:
【中文标题】为 jQuery 使用 .text() 方法时如何保持换行符？【英文标题】：How to keep line breaks when using .text() method for jQuery? 【发布时间】：2021-03-21 03:12:28 【问题描述】：我正在尝试实现打字效果，我的内容包含很多 html 实体。使用 .html() 的问题在于，因为它一次写出每个字母，所以它会先输入 &，然后是 l，然后是 t，然后是 ;，最后会变成 <。
HTML
<p id="src">
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if lt IE 9]> <html class="no-js lt-ie9"> <![endif]-->
</p>
<p id="typed-paragraph">
<span id="target"></span>
<span id="typed-cursor">|</span>
</p>
CSS
#src
display: none;
jQuery
(function()
var srcText = $("#src").html();
i = 0;
result = srcText[i];
setInterval(function()
if(i == srcText.length-1)
clearInterval(this);
return;
;
i++;
result += srcText[i].replace("\n", "<br />");
$("#target").html(result);
, 150); // the period between every character and next one, in milliseonds.
)();
你可以在这里看到它的例子 http://jsfiddle.net/j9KF5/9/
但是如果我使用 .text() 那么我会丢失所有的换行符。
最终，我该如何解决实体问题或换行问题？
【问题讨论】：
尝试将 unescape() javascript 函数添加到您尝试即时渲染的 html 中，以便在开始打印之前将您的 html 字符代码替换为适当的标签。 @DhanasekarSM 这真的没用。 请在问题本身中包含一个完整的示例，而不仅仅是一个链接。 “明确地说，jsfiddle 和类似服务的链接是可以的，但问题或答案应该独立存在。任何帖子中都应该包含足够的信息，即使所有链接都指向未来的访问者，它仍然对未来的访问者有用换句话说，打破。” meta.stackexchange.com/a/151616/133242 FWIW，我有点喜欢这种“多行字符串”的方法：jsfiddle.net/j9KF5/13 【参考方案1】：您无需担心 HTML 实体或任何复杂的字符串替换。
你只需要一点 CSS：
#target
white-space: pre;
并使用.text() 方法：
(function()
var srcText = $("#src").text().trim();
i = 0;
result = srcText[i];
setInterval(function()
if(i == srcText.length-1)
clearInterval(this);
return;
;
i++;
result += srcText[i];
$("#target").text(result);
, 150); // the period between every character and next one, in milliseonds.
)();
http://jsfiddle.net/mattball/vsb9F/
【讨论】：
.text() 就是这样做的。
不...我已经说过了，它是.text()，仅此而已。也许阅读一些文档？
如此简单！ .text() 只是打印出文本， .trim() 删除文本周围的空白，css white-space 属性在有换行符时换行文本。哇，我曾考虑过使用空白属性，但在#src，而不是#target (GAH) 上。谢谢！
你拯救了我的一天！谢谢！
另一种选择是whitespace: pre-wrap，它避免了长线使框变宽【参考方案2】：
对于任何正在寻找问题标题实际询问的人（这就是我进入此页面的方式，“使用 jQuery 的 text() 方法时如何保持换行符”），您可以使用以下内容：
(function($)
$.fn.innerText = function(msg)
if (msg)
if (document.body.innerText)
for (var i in this)
this[i].innerText = msg;
else
for (var i in this)
this[i].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
return this;
else
if (document.body.innerText)
return this[0].innerText;
else
return this[0].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
;
)(jQuery);
现在调用 $('.some-class').innerText() 来获取保留换行符的文本。
【讨论】：
不错，但接受的答案也有效 =] 我不知道white-space: pre; CSS 规则实际上如何影响 jQuery 获取其text() 的方式，但它确实有效。【参考方案3】：
为什么不在srcText 变量上使用.replace。
srcText = srcText.replace(/</g, "<"); //performs this with global modifier to cover whole string
在函数内放置一系列.replace 调用，每次调用都修改为不同的字符，这会在将整个字符串打印到屏幕之前对其进行清理。
【讨论】：
所有其他 HTML 实体，或者像&#9731; 这样的转义符呢？这不是一个可行的通用解决方案。
同意，虽然在这个特定问题的范围内，只有三种字符类型可以替换。【参考方案4】：
我建议使用.innerText 而不是在其他答案中实现复杂的循环，因为它可以为您节省更多时间。为此，只需执行$(selector)[0].innerText。
这是一个演示。开始输入输入。确保添加新行，看看innerText 是如何保留它们的！
var jquerytext = $('.jQuerytext');
var innerText = $('.innerText');
$('.text').on('input', function()
jquerytext.text($(this).text());
innerText[0].innerText=($(this)[0].innerText);
)pre
display:inline;
.text
border:2px solid black;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text" contenteditable="true" spellcheck="false">Hello World!
Begin typing in here, and make sure to press Enter to make new lines!
</div>
<h2>jQuery <pre>.text()</pre></h2>
<div class="jQuerytext">
Begin typing in here, and make sure to press Enter to make new lines!
</div>
<h2>Vanilla <pre>.innerText</pre></h2>
<div class="innerText">
Begin typing in here, and make sure to press Enter to make new lines!
</div>【讨论】：
以上是关于为 jQuery 使用 .text() 方法时如何保持换行符？的主要内容，如果未能解决你的问题，请参考以下文章