如何在JavaScript逐字动画中渲染HTML文本（保留标签效果不显示标签）

我用下面的代码实现了文本逐字加载动画：

JavaScript 代码 #

const loadingText = $('#loading-text');
const text = "Your first sentence here"; // Your first sentence here

let i = 0;

const interval = setInterval(() => {
  if (i === text.length) {
    clearInterval(interval);
  } else {
    loadingText.text(loadingText.text() + text[i]);
    i++;
  }
}, 100); // Speed of animation (adjust as needed)

CSS 代码 #

#loading-text {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20px auto;
  width: 50%;
  opacity: 1;
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="loading-text"></div>

现在遇到一个问题：如果文本包含HTML标签（比如const text = "lorem rerum <b style=\"color:#f00;\">aperiam</b> maxime reiciendis";），用现有代码会直接显示标签代码，而不是渲染出加粗红色的效果。试过用.html()方法也没解决，该怎么让HTML标签生效但不显示标签本身？

解决方案 #

原来的问题出在逐字拼接的逻辑上：每次添加单个字符时，HTML标签会被拆成零散的字符（比如先加<，再加b），浏览器会把这些当作文本处理，而不是解析成标签。正确的做法是先把HTML解析成DOM节点，再按节点类型逐个加载：

修改后的JavaScript代码：

const loadingText = $('#loading-text');
// 带HTML标签的目标文本
const htmlText = 'lorem rerum <b style="color:#f00;">aperiam</b> maxime reiciendis';

// 创建临时容器解析HTML，拆分出文本节点和元素节点
const tempContainer = $('<div>').html(htmlText);
const nodes = tempContainer.contents();

let nodeIndex = 0;
let charIndex = 0;

const interval = setInterval(() => {
  // 所有节点处理完，停止动画
  if (nodeIndex >= nodes.length) {
    clearInterval(interval);
    return;
  }

  const currentNode = nodes[nodeIndex];

  // 处理文本节点：逐字添加
  if (currentNode.nodeType === Node.TEXT_NODE) {
    const content = currentNode.textContent;
    if (charIndex < content.length) {
      loadingText.append(content[charIndex]);
      charIndex++;
    } else {
      // 当前文本节点处理完，切换到下一个节点
      nodeIndex++;
      charIndex = 0;
    }
  } 
  // 处理元素节点：直接插入整个元素（自动渲染样式）
  else if (currentNode.nodeType === Node.ELEMENT_NODE) {
    loadingText.append(currentNode.cloneNode(true));
    nodeIndex++;
    charIndex = 0;
  }
}, 100); // 可根据需求调整动画速度

逻辑说明 #

1. 先用临时<div>把HTML文本解析成真实的DOM节点，区分出普通文本和带样式的元素
2. 遍历这些节点：
   • 文本节点：保持逐字加载的动画效果，逐个字符添加
   • 元素节点：直接插入完整的元素，浏览器会自动解析标签样式，不会显示标签代码
3. CSS和HTML部分不需要修改，直接沿用原来的即可

内容的提问来源于stack exchange，提问作者Wp-PHP