javascript - 文本内带有 HTML 标签的打字机效果

Question

我正在尝试实现我所做的打字效果，但问题是我拥有的文本正在 <p> 中输入标签，因为它的内部 HTML 也有一些 HTML 标签，如 <span></span>因为输入是一个字符一个字符地输入，所以输入的是 <span>而不是渲染为元素。有什么方法可以在保持HTML标签不变的情况下达到效果吗？我突出显示了包含在跨度中的单词，我最终想要实现的是将单词键入为突出显示...

  function typeWriter() {
    if (i < txt.length) {
      document.getElementById("content_html").innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, self.typing.speed);
    }
  }
  typeWriter();

这是我尝试输入的文本示例:

<p>Surface chemistry deals with phenomena that occur at the surfaces or interfaces. Many important phenomena, noticeable amongst this being corrosion, electrode processes,&nbsp;heterogeneous catalysis, dissolution, and crystallization occur at interfaces. The subject of surface chemistry finds many applications in industry, analytical work, and daily life situations.</p>

它包含 <p>标签将来可以更改为任何其他 HTML 标签，因为它来自服务器...

Answer 1

我不完全理解你的问题，但你也可以用纯CSS实现打字动画，如this Codepen所示这可以消除您遇到的一些问题。

animation: typing 7s steps(15, end), /* # of steps = # of chars */
               blink-caret .5s step-end infinite alternate;