Make specific letters appear in different colors within <p>

Question

I have a website that has a command line-like animation, which means when I refresh it it will enter a phrase. It works fine, but I want certain letters (XYZ) to appear in neon pink. I tried to make it work in many ways but just couldn't. Does anyone know how to do this?

I tried adding another but the loop is not working properly.

// 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

If you include styles in the text, like this, it messes with the timing, right?

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

You can solve this problem by advancing the letterCount index to any token in the typeLetter function:

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