实现带HTML标签的打字机效果：标签无法正常渲染的解决方案咨询

这个问题我之前帮朋友处理过——核心原因是你原来的代码把HTML字符串当成纯文本逐字符拼接到innerHTML里，浏览器会先把单个的<、s这些字符当成文本渲染，直到整个标签拼完才会解析成元素，中间不仅会显示乱码一样的标签字符，还可能导致DOM结构混乱。

要实现保留HTML标签渲染效果的打字机，关键是先把服务器返回的HTML解析成真实的DOM节点，然后按顺序处理文本节点和元素节点，而不是粗暴地逐字符拼接字符串。

完整实现代码 #

// 服务器返回的HTML文本（示例）
const serverHtml = `<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>`;

// 打字速度（毫秒/字符，可根据需求调整）
const typingSpeed = 50;

// 目标容器
const targetContainer = document.getElementById("content_html");

// 1. 用临时容器解析HTML，转换成DOM节点队列
const tempDiv = document.createElement('div');
tempDiv.innerHTML = serverHtml;
const nodeQueue = Array.from(tempDiv.childNodes);

// 2. 跟踪处理进度的变量
let currentNodeIndex = 0;
let currentCharIndex = 0;

function typeWriter() {
  // 所有节点处理完毕，结束打字效果
  if (currentNodeIndex >= nodeQueue.length) return;

  const currentNode = nodeQueue[currentNodeIndex];

  if (currentNode.nodeType === Node.TEXT_NODE) {
    // 处理文本节点：逐字符添加到目标容器
    if (currentCharIndex < currentNode.textContent.length) {
      targetContainer.appendChild(
        document.createTextNode(currentNode.textContent.charAt(currentCharIndex))
      );
      currentCharIndex++;
      setTimeout(typeWriter, typingSpeed);
    } else {
      // 当前文本节点处理完，切换到下一个节点
      currentNodeIndex++;
      currentCharIndex = 0;
      setTimeout(typeWriter, typingSpeed);
    }
  } else if (currentNode.nodeType === Node.ELEMENT_NODE) {
    // 处理元素节点：先插入空的元素容器，再处理其内部内容
    const clonedElement = currentNode.cloneNode(false); // 克隆空元素（不包含子节点）
    targetContainer.appendChild(clonedElement);

    // 将当前元素的子节点插入到队列的下一个位置，保证后续处理内部内容
    nodeQueue.splice(
      currentNodeIndex + 1,
      0,
      ...Array.from(currentNode.childNodes)
    );

    // 切换到下一个节点（即当前元素的第一个子节点）
    currentNodeIndex++;
    currentCharIndex = 0;
    setTimeout(typeWriter, typingSpeed);
  }
}

// 启动打字机效果
typeWriter();

代码工作原理 #

1. 解析HTML为DOM节点：用临时div把服务器返回的HTML字符串转换成真实的DOM节点，这样我们能准确区分文本内容和HTML元素。
2. 分类型处理节点：
   • 对于文本节点：逐字符创建文本节点并添加到目标容器，确保每个字符按顺序输出。
   • 对于元素节点：先克隆一个空的元素（比如空的<p>或<span>）插入到目标容器，再把元素内部的子节点加入到处理队列中，这样元素的结构先被创建，内部的文本再逐字打出，自然保留了元素的样式和结构。
3. 递归式遍历：通过队列的方式依次处理所有节点，即使是嵌套的HTML结构（比如<p><span>高亮文本</span>普通文本</p>）也能完美适配。

注意事项 #

• 确保目标容器content_html初始为空，避免重复渲染内容。
• 如果需要重置打字效果，要重新初始化nodeQueue、currentNodeIndex和currentCharIndex这几个变量。
• 可以根据需求调整typingSpeed参数，控制打字的快慢。

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