如何使用 jQuery 实现每隔几秒随机高亮列表中的一个单词

作者：袖梨 2026-07-16

本文介绍如何将形如“XXX - YYY - ZZZ”的分隔字符串拆分为独立单词，用 <span> 包裹后，通过定时器随机为其中一个单词添加高亮样式，并循环切换，实现动态视觉强调效果。

本文介绍如何将形如“xxx - yyy - zzz”的分隔字符串拆分为独立单词，用 `` 包裹后，通过定时器随机为其中一个单词添加高亮样式，并循环切换，实现动态视觉强调效果。

要实现“每几秒随机高亮一个单词”的交互效果，核心步骤包括：文本解析 → DOM 结构化 → 定时高亮切换。下面以 jQuery 为例，提供完整、可直接运行的解决方案。

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

首先，从容器中提取纯文本（避免误解析 HTML），按 " - " 分割为单词数组，再用 <span> 封装每个单词，并重新注入 DOM：

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

⚠️ 注意：使用 .text() 而非 .html() 提取内容，确保安全；.trim() 清除首尾空格，提升健壮性。

✅ 步骤二：定时随机高亮

利用 setInterval 每 1500ms（1.5秒）执行一次高亮逻辑：

移除所有已有 .highlight 类；
随机生成索引（Math.floor(Math.random() * spans.length)）；
为目标 <span> 添加高亮类。

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

? 提示：若需避免连续两次高亮同一单词，可记录上一次索引并做校验（见进阶优化）。

✅ 步骤三：定义高亮样式

配合 CSS 控制视觉效果，例如背景色+文字反色：

#highlight-list > span {  padding: 0.25em 0.5em;  margin: 0 2px;  border-radius: 3px;  transition: all 0.3s ease;}.highlight {  background-color: #6a0dad;  color: white;  font-weight: bold;  transform: scale(1.1);}

? 完整可运行示例

<!DOCTYPE html><html><head>  <style>    #highlight-list > span { padding: 0.25em 0.5em; margin: 0 2px; border-radius: 3px; transition: all 0.3s ease; }    .highlight { background-color: #6a0dad; color: white; font-weight: bold; transform: scale(1.1); }  </style></head><body>  <div id="highlight-list">Apple - Banana - Cherry - Date</div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  <script>    const $container = $("#highlight-list");    const words = $container.text().split(" - ");    const html = words.map(w => `<span>${w.trim()}</span>`).join(" - ");    $container.html(html);    setInterval(() => {      const $spans = $container.children("span");      $spans.removeClass("highlight");      const idx = Math.floor(Math.random() * $spans.length);      $spans.eq(idx).addClass("highlight");    }, 1500);  </script></body></html>