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

时间:2014-03-27 04:40:42

标签: javascript jquery html css

我试图实现打字效果,而我的内容包含很多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(),那么我将失去所有的换行符。

最终,我如何解决实体问题或换行问题?

4 个答案:

答案 0 :(得分:33)

您无需担心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/

答案 1 :(得分:11)

对于那些正在寻找问题标题实际问题的人(这是我到达此页面的方式,&#34;如何在使用jQuery的text()方法时保持换行符& #34;),您可以使用以下内容:

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

现在调用$(&#39; .some-class&#39;)。innerText()来保存包含换行符的文本。

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

我建议使用 .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>