innerHTML 还在算一个标签？

Question

我做了一个打字机效果，会先打出一个字符串，然后再删除。此处显示：https://www.w3schools.com/code/tryit.asp?filename=FZAVKJW3BPSV

但是，正如您在输出中看到的那样，有一个“>”标签不会消失！我什么都试过了。

我把有问题的功能贴在下面：

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      if(text == 0){
        return;
      }
      document.getElementById('test').innerHTML = text;

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
      if( char === '<' ) isTag = false;

      if (isTag) return removeType(i,isTag,text,str2);
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

Answer 1

替换

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      if(text == 0){
        return;
      }
      document.getElementById('test').innerHTML = text;

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
      if( char === '<' ) isTag = false;

      if (isTag) return removeType(i,isTag,text,str2);
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

来自

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      document.getElementById('test').innerHTML = text;
      if(text === ''){
        return;
      }

      var char = text.slice(-1);
      if( char === '>' ) isTag = true;

      if (isTag) {
        if( char === '<' ) isTag = false;
        return removeType(i,isTag,text,str2);
      }
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

有两个相同的问题。

如果在字符串为空但更新显示之前退出，则将保留一个字符（并且字符串==“”不是0）

如果你在处理标签的时候说完成了，它就会出现。您必须记住，标签已为下一轮完成。可能有几种方法，但我建议的方法不会创建新变量。

您也可以使用它来删除标签：

  str2.replace(/<[^>]*>/g, '');

或（警告，字符串必须可信）：

  var str2 = "Hello Whosebug<span class='punc'>?</span>";

  const el = document.createElement('p');
  el.innerHTML = str2;
  str2 = el.innerText;

window.onload = function(){
      var str2 = "Hello Whosebug<span class='punc'>?</span>";
      i = 0;
      j = 0;
      isTag = false;
      text = "";
      type(i,isTag,text,str2);
    }
      function type(i,isTag,text,str2){
        text = str2.slice(0, ++i);
        if (text === str2) {
          setTimeout(function() { removeType(i,isTag,text,str2);}, 2000);
          return;
        }
        document.getElementById('test').innerHTML = text;

        var char = text.slice(-1);
        if( char === '<' ) isTag = true;
        if( char === '>' ) isTag = false;

        if (isTag) return type(i,isTag,text,str2);
        setTimeout(function() { type(i,isTag,text,str2);}, 80);
    }

    function removeType(i,isTag,text,str2) {
      text = str2.slice(0, --i);

      document.getElementById('test').innerHTML = text;

      if(text === ''){
        return;
      }
      
      var char = text.slice(-1);
      if( char === '>' ) isTag = true;
    
      if (isTag) {
        if( char === '<' ) isTag = false;
       return removeType(i,isTag,text,str2);
      }
      setTimeout(function() { removeType(i,isTag,text,str2);}, 100);

    }

<div id="test"> </div>

Answer 2

函数 removeType 中的问题是当您刚刚解析 < 时，您没有进入 if (isTag) 主体。这样一来，该角色就会一直可见，直到下一个计时器滴答为止。

通过将 if 条件更改为：

来修复它

if (isTag || char === '<')

无关，但你也应该改变：

if(text == 0){

... 因为那个条件永远不会成立（除非你的全文的第一个字符是“0”）。将其更改为：

if (!text.length){

innerHTML 还在算一个标签？

innerHTML is still counting a tag?

html

javascript

innerhtml

web