Как сохранить разрывы строк при использовании метода .text() для jQuery?

Я пытаюсь добиться эффекта машинного письма, и мой контент состоит из множества объектов HTML. Проблема с использованием .html() заключается в том, что, поскольку она выписывает каждую букву за раз, она выберет &, затем l, затем t, затем ; и, наконец, она изменится на <.

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

Вы можете увидеть его здесь http://jsfiddle.net/j9KF5/9/

Но если я использую .text(), я теряю все разрывы строк.

В конечном счете, как я могу либо исправить проблему с объектами, либо проблему с разрывом строки?

Ответы

Ответ 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/

Ответ 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(/&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);

Теперь вызовите $('. some-class'). innerText(), чтобы получить текст с разрывами строк.

Ответ 3

Почему бы не использовать .replace для переменной srcText.

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

Размещение серии вызовов .replace внутри функции, причем каждый вызов, модифицированный для другого символа, будет дезинфицировать всю строку перед ее печатью на экране.