innerHTML все еще считает тег? - PullRequest
Новая
       11

innerHTML все еще считает тег?

0 голосов
/ 18 января 2019

Я сделал эффект пишущей машинки, который сначала напечатает строку, а затем снова ее удалит. Показано здесь: 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);

    }

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Проблема в функции removeType состоит в том, что вы не попали в тело if (isTag), когда только что проанализировали <. Так что этот символ останется видимым до следующего таймера.

Исправьте это, изменив условие if на: 

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

Не имеет отношения, но вы также должны изменить: 

if(text == 0){

.... потому что это условие никогда не будет истинным (если только первый символ вашего полного текста не равен "0"). Измените его на: 

if (!text.length){
0 голосов
/ 18 января 2019

Заменить 

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

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