本文介绍如何将形如“xxx - yyy - zzz”的连字符分隔文本自动拆分为独立可操作的单词，并利用 jquery 和 css 实现每秒（或自定义间隔）随机高亮其中一个单词的完整方案。
本文介绍如何将形如“xxx - yyy - zzz”的连字符分隔文本自动拆分为独立可操作的单词，并利用 jquery 和 css 实现每秒（或自定义间隔）随机高亮其中一个单词的完整方案。
要实现动态高亮分隔文本中的随机单词，核心在于三步：结构化拆分 → 封装为可样式化元素 → 定时轮播高亮。以下为完整、健壮且可直接运行的实现方案。
首先，确保 HTML 结构简洁规范（注意原问题中误用了 <a> 闭合标签，应为 <div>）：
<div id="highlight-list">XXX - YYY - ZZZ</div>
接着引入 jQuery（推荐 CDN）并执行初始化逻辑：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
// 1. 提取纯文本并按 " - " 拆分（避免正则歧义，直接字符串分割更可靠）
const words = $("#highlight-list").text().split(" - ").map(w => w.trim());
// 2. 构建带 <span> 包裹的 HTML，保留原始分隔符语义
const html = words.map(word => `<span>${word}</span>`).join(" - ");
$("#highlight-list").html(html);
// 3. 启动定时高亮：每 1500ms 随机选中一个 span 并添加 .highlight 类
const $spans = $("#highlight-list > span");
let lastHighlightedIndex = -1;
setInterval(() => {
// 移除所有已有高亮
$spans.removeClass("highlight");
// 防止连续两次高亮同一单词（可选增强逻辑）
let index;
do {
index = Math.floor(Math.random() * $spans.length);
} while ($spans.length > 1 && index === lastHighlightedIndex);
lastHighlightedIndex = index;
$spans.eq(index).addClass("highlight");
}, 1500);
});
</script>配套 CSS 建议如下，兼顾可读性与视觉反馈：
#highlight-list > span {
padding: 0.25em 0.5em;
margin: 0 2px;
border-radius: 4px;
transition: all 0.3s ease;
display: inline-block;
}
.highlight {
color: #fff;
background-color: #6a0dad; /* rebeccapurple */
font-weight: bold;
transform: scale(1.08);
}✅ 关键注意事项：
- 使用 .text().split(" - ") 而非 innerHTML.split(...)，可避免 HTML 标签干扰，更安全；
- .map().join() 替代循环拼接字符串，代码更函数式、可维护性更强；
- 添加 lastHighlightedIndex 防重逻辑，显著提升多词场景下的视觉体验（尤其当单词数 ≤ 3 时）；
- 所有 DOM 操作应在 $(function(){...}) 中执行，确保 DOM 加载完成；
- transition 和 transform 让高亮具备平滑缩放动画，增强交互感。
该方案轻量、无依赖、兼容主流浏览器，可轻松扩展为支持任意分隔符（如逗号、竖线）或集成到 Vue/React 等框架中。
