本文介绍如何将形如“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秒）执行一次高亮逻辑：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 移除所有已有 .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>? 进阶建议
- 去重优化：若单词数少（如仅 3 个），可缓存上一索引，重试生成不同值，避免视觉重复感；
- 性能考虑：对于大量单词，建议使用 documentFragment 或 innerHTML 批量操作，减少重排；
- 无障碍增强：为 .highlight 添加 aria-live="polite"，便于屏幕阅读器感知变化。
该方案简洁、可扩展，适用于产品介绍、关键词强调、教学提示等多种场景。
