JavaScript实现的打字动画执行时自动移除HTML标签该如何解决？

问题根源 #

原有代码直接操作textContent属性，该属性会自动剥离元素内的所有HTML标签，仅保留纯文本内容，嵌套的标签及其样式会被直接丢弃。如果你传入的是元素的innerHTML作为打印内容，还会把标签本身的字符（比如<span、class=这类代码字符）计入打印队列，额外占用大量打印时间，就会出现卡顿后丢失样式的现象。

实现思路 #

要保留原有HTML结构，我们不需要修改任何元素节点的属性和结构，只需要递归提取目标元素下的所有文本节点，把每个文本节点的原有内容清空，再将所有待打印的字符和其所属的文本节点绑定成队列，按顺序逐个追加字符即可。

完整实现代码 #

function typeText(element) {
  // 存储待打印字符与所属文本节点的映射队列
  const charQueue = [];

  // 递归遍历所有节点提取文本内容
  function traverseNodes(node) {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const originText = node.textContent;
      // 先清空文本节点原有内容
      node.textContent = '';
      // 逐个字符加入队列，绑定所属节点
      for (const char of originText) {
        charQueue.push({
          targetNode: node,
          character: char
        });
      }
      return;
    }
    // 元素节点递归处理所有子节点
    for (const child of node.childNodes) {
      traverseNodes(child);
    }
  }

  // 初始化提取所有字符
  traverseNodes(element);
  let currentIndex = 0;

  // 打字执行逻辑
  function runTyping() {
    if (currentIndex < charQueue.length) {
      const { targetNode, character } = charQueue[currentIndex];
      targetNode.textContent += character;
      currentIndex++;
      // 保留原有的随机打字速度逻辑
      const typingSpeed = Math.floor(Math.random() * 100) + 30;
      setTimeout(runTyping, typingSpeed);
    }
  }

  runTyping();
}

使用示例 #

针对你给出的嵌套span的h2结构，直接调用函数传入目标元素即可：

// 选中目标元素
const titleElement = document.querySelector('h2');
// 启动打字效果
typeText(titleElement);

该实现可以兼容任意层级的嵌套HTML标签，所有标签的原有样式、属性都会完全保留，不会出现卡顿或样式丢失的问题。

内容的提问来源于stack exchange，提问作者Nicolas Kuhn