Javascript 按字符写入/删除文本

我尝试逐字符更改任何文本（逐字符显示文本、逐字符删除文本和逐字符显示另一个文本）

我实际拥有什么？

var i = 0;
var terms = ['text  <b>bold</b>', 'longer text <b>bold</b>', '<b>bold</b> text 3'];

var timer = setInterval(function() {
    var el = $('#el');
    var wr = $('#wr');

    setInterval(function() {
        var str = el.html(); // doesn't work (still shows all content, not sliced one)
        el.html(str.substring(0, str.length - 1));
    }, 300 / str.length); // (300 / str.length) - do all animation in 300s

    i++;

    if (i === 3) {
        i = 0;
    }

}, 2500);

好的，由于评论，请稍加解释

我有一个元素

文本粗体

在300毫秒的时间间隔内，我需要逐字符删除此文本

<span id=el>text <b>bold</b></span>
<span id=el>text <b>bol</b></span>
<span id=el>text <b>bo</b></span>
<span id=el>text <b>b</b></span>
<span id=el>text <b></b></span> // remove 'b'
<span id=el>text</span> // remove ' ' and empty bold
<span id=el>tex</span>
<span id=el>te</span>
<span id=el>t</span>
<span id=el></span>
// now element is empty, since start it's 300ms

// and now I need to put there new text, char by char (whole phrase 300ms again)
<span id=el>l</span>
<span id=el>lo</span>
<span id=el>lon</span>
...
<span id=el>longer tex</span>
<span id=el>longer text</span>
<span id=el>longer text </span> // add space
<span id=el>longer text <b>b</b></span> // add 'b' into bold
<span id=el>longer text <b>bo</b></span>
<span id=el>longer text <b>bol</b></span>
<span id=el>longer text <b>bold</b></span>
// after 2500ms remove this char by char again and replace by third. Etc.

文本粗体
文本bol
文博
文本b
text//删除“b”
文本//删除“”，并以粗体显示为空
特克斯
te
T
//现在元素为空，因为开始时为300ms
//现在我需要把新的文本，一个字符接一个字符（整个短语又是300毫秒）
L
瞧
朗
...
长特
长文本
较长的文本//添加空格
较长的文本b//将“b”添加到粗体中
长文本bo
长文本bol
长文本粗体
//2500毫秒后，再次逐字符删除此字符，并替换为第三个字符。等

你能帮我吗？在过去的两天里尝试了很多次都没有结果

---

谢谢

好的，根据我的理解，您希望逐个字符显示字符串/文本字符。所以我认为这会对你有所帮助

var str=“你好世界”；
var c=“”；
var i=0；
（函数循环（）{
如果（i++>str.length-1）返回；
c=c+str[i-1]；
setTimeout（函数（）{
$（“#charP”）。文本（c）；
loop（）；
}, 100);
})();


这就是我如何组织代码来收缩和增长元素的方法。唯一可行的方法是首先用相应的实体代码
和
替换
，这样这些字符就不会被解释为实际的标记。这些4个字母的实体代码将作为单个单元删除和添加。通过这种方式，您可以将字符串从右向左一次压缩一个准字符，并且始终保持有效的HTML

Promise
api（实际上是jQuery的$.Deferred版本）用于以确定的方式知道收缩-增长周期（异步进程）何时完成，然后在重新开始之前启动2500毫秒延迟（另一个异步进程）


$（函数（）{
函数收缩和增长（解析、术语）
{
term=term.replace（//g'，）；
设el=$（'el'）；
html（术语）；
let interval=setInterval（收缩器，30）；
函数收缩器（）
{
设str=el.html（）；
设n=str.length>=4&（str.endsWith（''）| | str.endsWith（`'）？4:1；
html（str.substr（0，str.length-n））；
如果（str.length==0）{
间隔时间；
间隔=设定间隔（种植者，30）；
}
}
函数种植者（）
{
设str=el.html（）；
如果（str.length==term.length）{
间隔时间；
解决（未定义）；//我们完成了
}
否则如果（str.length
术语在哪里起作用？
类中各种值的定义是什么？
？如果您添加更多的代码并将其转换为完整的代码段，这将很有帮助。请解释您有什么，您想要什么。让您的问题更详细clear@Booboo：
var术语
在第二行。是的，但是我们不知道类
cls1
的定义，是吗？我说的是“类
中的值”
。大概这是一种
CSS
样式。我添加了一点解释……更清楚了？：-）不，首先逐个字符删除文本字符，然后再显示另一个字符。在300毫秒内独立显示/隐藏文本长度。部分文本如我在问题中所写的那样以粗体显示。谢谢，我会查看它。我看到的是，您每更改一个字母都有300毫秒，我需要300毫秒来隐藏/显示整个文本。然后您评论了
标记的问题，但您确实这样做了他们什么都没有…你有什么想法，如何改进吗？当然，至少是+1。我将间隔改为30毫秒，
包含一个
标记，因此包含jQuery Selector。再次：-）间隔不应该是静态的30毫秒，而是动态的（没关系，我自己做）…但是显示/隐藏的文本不只是在
内部，而是包含
的文本。请看问题，显示/隐藏的字符串是例如
文本粗体
（包括空格在内的9个字符）。我更改了整个元素内容（不仅仅是子元素
b
），因此选择器是
$（'#el'））
。内容为
文本粗体
（9个字符，每个字符时间变化300ms/9~33ms），或
较长的文本加斜体文本。
（29个字符，每个字符时间变化300/29ms~10ms）。您需要两个选择器
$（#el b）
和
（#el）
分配给
el2
。当收缩第一个选择器且文本长度为0时，获取第二个选择器的内容，
el2.html（）
并保存在
text2
中，然后使用
el2.html（）继续收缩
直到其长度变为0，然后切换到
growing
。在
growing
中，从
el2.html（）
util开始，长度为
test2.length
，然后切换到
el.html（）
直到长度为
text.length
。唯一棘手的问题是每次调用
收缩
和
增长
您使用的元素。但我相信您可以找到答案。
<span id=el>text <b>bold</b></span>
<span id=el>text <b>bol</b></span>
<span id=el>text <b>bo</b></span>
<span id=el>text <b>b</b></span>
<span id=el>text <b></b></span> // remove 'b'
<span id=el>text</span> // remove ' ' and empty bold
<span id=el>tex</span>
<span id=el>te</span>
<span id=el>t</span>
<span id=el></span>
// now element is empty, since start it's 300ms

// and now I need to put there new text, char by char (whole phrase 300ms again)
<span id=el>l</span>
<span id=el>lo</span>
<span id=el>lon</span>
...
<span id=el>longer tex</span>
<span id=el>longer text</span>
<span id=el>longer text </span> // add space
<span id=el>longer text <b>b</b></span> // add 'b' into bold
<span id=el>longer text <b>bo</b></span>
<span id=el>longer text <b>bol</b></span>
<span id=el>longer text <b>bold</b></span>
// after 2500ms remove this char by char again and replace by third. Etc.