innerHTML 还在计算一个标签吗？答案

【问题标题】：innerHTML is still counting a tag?innerHTML 还在计算一个标签吗？
【发布时间】：2019-01-18 09:42:54
【问题描述】：

我做了一个打字机效果，它会先输入一个字符串，然后再删除它。此处显示：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);

    }

【问题讨论】：

请在您的问题中发布您的相关“minimal reproducible example”代码，不要只是发布链接并期望我们去看看。
你的问题在这里 if( char === '<' ) isTag = false; 在这两个地方都改为 true if( char === '<' ) isTag = true;
@Ingus，请注意，这些函数中字符串解析的方向是相反的，因此< 的效果必须不同。
@trincot 我测试了它，它似乎在工作
在函数 removeType 中将 if 更改为 if (isTag || char === '<')。

标签： javascript html web innerhtml

【解决方案1】：

函数removeType 中的问题是，当您刚刚解析< 时，您没有进入if (isTag) 主体。所以这将使该字符保持可见，直到下一个计时器滴答声。

通过将if 条件更改为：

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

无关，但你也应该改变：

if(text == 0){

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

if (!text.length){

【讨论】：

【解决方案2】：

替换

    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 Stackoverflow<span class='punc'>?</span>";

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

window.onload = function(){
      var str2 = "Hello Stackoverflow<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);

    }

&lt;div id="test"&gt; &lt;/div&gt;

【讨论】：