Wie Sie Zeilenumbrüche beibehalten, wenn Sie die .text() -Methode für jQuery verwenden?

Question

Ich versuche, einen Schreibeffekt zu erreichen und mein Inhalt besteht aus vielen HTML-Entitäten. Das Problem mit der Verwendung von .html() ist, dass, da es jeden Buchstaben auf einmal ausschreibt, & dann l dann t dann ; und schließlich würde es zu < wechseln.

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

Sie das Beispiel hier sehen können http://jsfiddle.net/j9KF5/9/

Aber wenn ich .text() verwende, dann verliere ich alle Zeilenumbrüche.

Letztendlich, wie kann ich entweder das Entitätsproblem oder das Zeilenumbruchproblem beheben?

Answer 1

Sie müssen sich keine Gedanken über die HTML-Entities machen oder einen komplexen String ersetzen.

Alles, was Sie brauchen, ist ein wenig CSS:

#target { 
    white-space: pre; 
} 

und verwenden Sie den .text() Ansatz:

(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

Warum nicht .replace auf der srcText Variable verwenden.

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

Platzieren eine Reihe von .replace Anrufen innerhalb einer Funktion, bei jedem Aufruf zu einem anderen Charakter geändert würde die gesamte Zeichenfolge sanieren, bevor Sie es auf den Bildschirm zu drucken.

Answer 3

Für jeden, der auf der Suche nach ist, was der Titel der Frage tatsächlich fragt (So ​​kam ich zu dieser Seite, "wie man Zeilenumbrüche bei der Verwendung der jQuery-Methode text()" einhält), kann man so etwas verwenden:

Rufen Sie nun $ ('. Some-class') auf. InnerText() um den Text mit Zeilenumbrüchen zu erhalten.