如何在jQuery使用.text()方法时保持换行符?

I'm trying to achieve a typewriting effect and my content consists of a lot of HTML entities. The problem with using .html() is that since it writes out each letter at a time, it will type out & then l then t then ; and finally it would change to <.

我正在尝试实现一种打印效果，我的内容由许多HTML实体组成。使用。html()的问题是，由于它每次都写出每个字母，它就会打印出来，然后是l，然后是t;最后它会变成<。

HTML

HTML

<p id="src">
&lt;!DOCTYPE html&gt;
&lt;!--[if lt IE 7]&gt;      &lt;html class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;         &lt;html class=&quot;no-js lt-ie9 lt-ie8&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;         &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
&lt;!--[if lt IE 9]&gt;      &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;![endif]--&gt;
</p>
<p id="typed-paragraph">
    <span id="target"></span>
    <span id="typed-cursor">|</span>
</p>

CSS

CSS

#src {
    display: none;
}

jQuery

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.
})();

You can see the example of it here http://jsfiddle.net/j9KF5/9/

您可以在这里看到http://jsfiddle.net/j9KF5/9/的示例

But if I use .text() then I lose all the line breaks.

但是如果我使用。text()，那么我就失去了所有的换行符。

Ultimately, how I can either fix the entities problem or the line break problem?

最后，我如何修复实体问题或断行问题?

3 个解决方案

#1

You don't need to worry about the HTML entities nor any complex string replacing.

您不需要担心HTML实体或任何复杂的字符串替换。

All you need is a little CSS:

你只需要一点CSS:

#target {
    white-space: pre;
}

and use the .text() approach:

并使用.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/

#2

To anyone who's looking for what the title of the question actually asks (this is how I got to this page, "how to keep line breaks when using jQuery's text() method"), you can use something like this:

对于任何正在寻找问题标题的人(这是我如何到达这个页面，“如何使用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(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
               }
            }
            return this;
         } else {
            if (document.body.innerText) {
               return this[0].innerText;
            } else {
               return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
            }
         }
   };
})(jQuery);

Now call $('.some-class').innerText() to get the text with line breaks preserved.

现在调用$('.some-class'). innertext()来保留换行符的文本。

#3

Why not use .replace on the srcText variable.

为什么不在srcText变量上使用.replace呢?

srcText = srcText.replace(/&lt;/g, "<"); //performs this with global modifier to cover whole string

Placing a series of .replace calls inside a function, with each call modified to a different character would sanitise the whole string before you print it to the screen.

在函数中放置一系列.replace调用，每个调用都修改为不同的字符，这样可以在将整个字符串打印到屏幕之前对其进行清理。

#1