How to keep line breaks when using .text() method for jQuery?

Question

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

<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

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

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

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

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

Answer 1

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

All you need is a little CSS:

#target {     white-space: pre; } 

and use the .text() approach:

(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/

Answer 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:

(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(/<br>/gi,"n").replace(/(<([^>]+)>)/gi, "");                }             }             return this;          } else {             if (document.body.innerText) {                return this[0].innerText;             } else {                return this[0].innerHTML.replace(/<br>/gi,"n").replace(/(<([^>]+)>)/gi, "");             }          }    }; })(jQuery); 

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