jQuery每几秒随机高亮列表单词的方法

这种需求非常普遍：将一段由分隔符连接的字符串拆分成独立单词，每个单词用 包裹，再通过定时器随机选取一个单词添加高亮样式，循环切换，从而实现动态视觉强调效果。该交互广泛应用于产品介绍页、关键词强调场景、教学提示等页面。

实现“每几秒随机高亮一个单词”的核心步骤只有三步：解析文本 → 构建DOM结构 → 定时切换高亮。下面以jQuery完整方案为例，提供可直接运行的代码。

✅ 步骤一：将原始文本结构化

首先，从容器中提取纯文本内容（务必使用 .text() 方法而非 .html()，避免误解析内部HTML标签），然后按“ - ”分隔符分割成单词数组，再用 包裹每个单词，最后重新插入DOM。

const $container = $("#highlight-list");
const words = $container.text().split(" - ");
const html = words.map(word => `${word.trim()}`).join(" - ");
$container.html(html);

⚠️ 注意：使用 .text() 提取内容可确保安全；.trim() 清除首尾空格，使结果更健壮。

✅ 步骤二：定时随机高亮

使用 setInterval 定时器，每1.5秒执行一次高亮逻辑。流程：先移除所有 .highlight 类，再随机生成索引，为对应 添加高亮类。

setInterval(() => {
  const $spans = $("#highlight-list > span");
  $spans.removeClass("highlight");
  const randomIndex = Math.floor(Math.random() * $spans.length);
  $spans.eq(randomIndex).addClass("highlight");
}, 1500);