我试图实现打字效果,而我的内容包含很多HTML实体。使用.html()的问题在于,因为它一次写出每个字母,它会输出&
然后l
然后t
然后;
,最后输入会改为<
。
HTML
<p id="src">
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if lt IE 9]> <html class="no-js lt-ie9"> <![endif]-->
</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(),那么我将失去所有的换行符。
最终,我如何解决实体问题或换行问题?
答案 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.
})();
答案 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(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
}
}
return this;
} else {
if (document.body.innerText) {
return this[0].innerText;
} else {
return this[0].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
}
}
};
})(jQuery);
现在调用$(&#39; .some-class&#39;)。innerText()来保存包含换行符的文本。
答案 2 :(得分:0)
为什么不在.replace
变量上使用srcText
。
srcText = srcText.replace(/</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>