Faire apparaître des lettres spécifiques dans différentes couleurs dans <p>

Question

J'ai un site Web qui a une ligne de commande comme une animation, ce qui signifie que lorsque je l'actualise, il entrera une phrase. Cela fonctionne bien, mais je souhaite que certaines lettres (XYZ) apparaissent en rose fluo. J'ai essayé de le faire fonctionner de plusieurs manières, mais je n'y suis pas parvenu. Est-ce que quelqu'un sait comment faire ça?

J'ai essayé d'en ajouter un autre mais la boucle ne fonctionne pas correctement.

// set typing speed and wait times
var timeInit = 400; // initial wait before typing first line
var timeGap = 1000; // wait time between each line
var timeChar = 110; // time until next letter

var cursorChar = '_';

var originId = ['line1'];
var originText = new Array();
for (var i = 0; i < originId.length; i++) {
  originText.push(document.getElementById(originId[i]).innerHTML);
}

var cursorLine = document.getElementById('cursor-line');

var currentTimeout;
var showCursor;

var typeWriter = function(index) {
  var loc = document.getElementById(originId[index]);
  var fullText = originText[index];
  var letterCount = 0;

  // this function spits out one letter per call, then calls the subsequent typeLetter()
  var typeLetter = function() {
    currentTimeout = setTimeout(function() {
      loc.className = 'visible';
      letterCount += 1;
      var showText = fullText.substring(0, letterCount);

      // stops the function from self-calling when all letters are typed
      if (letterCount === fullText.length) {
        loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</spa';
      } else {
        loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
        typeLetter();
      }
    }, timeChar);
  };

  typeLetter();

  // show cursor on next line
};

// calculated time delays
var delayTime = [timeInit];
var cumulativeDelayTime = [timeInit];
for (var i = 0; i < originId.length; i++) {
  var elapsedTimeLine = originText[i].length * timeChar + timeGap + timeChar * 2;
  delayTime.push(elapsedTimeLine);
  var sum = 0;
  for (var j = 0; j < delayTime.length; j++) {
    sum += delayTime[j];
  }
  cumulativeDelayTime.push(sum);
}

// calls setTimeout for each line
var typeLineTimeout = new Array();
for (var i = 0; i < originId.length; i++) {
  typeLineTimeout[i] = setTimeout(
    (function(index) {
      return function() {
        cursorLine.className = 'hidden';
        typeWriter(index);
      };
    })(i),
    cumulativeDelayTime[i]
  );
}

// stops all timeouts
var skip = function() {
  clearTimeout(currentTimeout);
  clearTimeout(showCursor);
  for (var i = 0; i < typeLineTimeout.length; i++) {
    clearTimeout(typeLineTimeout[i]);
  }
};

// rewrite text with value stored on page load

// var rewriteText = function(index) {
//   var loc = document.getElementById(originId[index]);
//   loc.innerHTML = '> ' + originText[index];
//   loc.className = 'visible';
// };

// trigger skip and rewrite on pressing enter or spacebar
window.onkeydown = function(key) {
  if (key.which === 13 || key.which === 32) {
    skip();
    originId.forEach(rewriteText);
    document.getElementById('cursor-line').className = 'visible';
  }
};

body {
  font-family: monospace;
  background-color: black;
  color: white;
  text-align: center;
  margin-top: 21%;
}

.neon-pink {
  color: #ff00ff;
  /* Neon Pink color code */
}

.hidden {
  display: none;
  visibility: hidden;
}


/* ----- blinking cursor animation ----- */

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.95s infinite;
  -moz-animation: blink 0.95s infinite;
  -ms-animation: blink 0.95s infinite;
  -o-animation: blink 0.95s infinite;
  animation: blink 0.95s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<p id="line1" class="hidden">ABCXYZDEF</p>
<p id="cursor-line" class="visible">><span class="typed-cursor">_</span></p>

Answer 1

Si vous incluez des styles dans votre texte, comme celui-ci, cela gâche le timing, n'est-ce pas ?

<p id="line1" class="hidden">ABC<span class="neon-pink">XYZ</span>DEF</p>

Vous pouvez résoudre ce problème en mettant letterCount 索引推进到 typeLetter n'importe quelle balise dans la fonction :

    var typeLetter = function() {
      currentTimeout = setTimeout(function() {
        loc.className = 'visible';
        letterCount += 1;
        // Advance index past the markup
        if (fullText[letterCount] === '<') {
          while (fullText[++letterCount] !== ">") {
          }
          ++letterCount;
        }
        var showText = fullText.substring(0, letterCount);

        // stops the function from self-calling when all letters are typed
        if (letterCount === fullText.length) {
          loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
        } else {
          loc.innerHTML = '>' + showText + '<span class="typed-cursor">' + cursorChar + '</span>';
          typeLetter();
        }
      }, timeChar);
    };