如何使用 JavaScript 动态高亮文本中匹配数组关键词的内容-html教程-PHP中文网

如何使用 JavaScript 动态高亮文本中匹配数组关键词的内容

本文介绍如何通过正则表达式和字符串替换，用 JavaScript 动态为 HTML 文本中出现在指定数组中的单词添加 .highlight 样式，实现精准、大小写不敏感、词边界安全的高亮效果。

本文介绍如何通过正则表达式和字符串替换，用 javascript 动态为 html 文本中出现在指定数组中的单词添加 `.highlight` 样式，实现精准、大小写不敏感、词边界安全的高亮效果。

在前端开发中，常需根据关键词列表动态高亮页面中特定词汇（如搜索结果、术语强调等）。关键要求包括：仅匹配完整单词（避免子串误匹配）、忽略大小写、支持中文/英文混合场景，并确保 HTML 结构安全。以下是一个健壮、可复用的解决方案：

✅ 核心实现逻辑

我们封装一个 highlightWords 函数，接收原始文本与关键词数组，返回已插入 ... 包裹的 HTML 字符串：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const highlightWords = (text, wordsToHighlight) => {
  // 过滤空值并转义正则特殊字符（提升安全性）
  const escapedWords = wordsToHighlight
    .filter(word => word && typeof word === 'string')
    .map(word => word.replace(/[.*+?^${}()|[]\]/g, '\$&'));

  if (escapedWords.length === 0) return text;

  // 构建带词边界（）和全局忽略大小写（gi）的正则
  const regex = new RegExp(`\b(${escapedWords.join('|')})\b`, 'gi');

  return text.replace(regex, '<span class="highlight">$1</span>');
};

✅ 使用示例

<style>
.highlight {
  color: white;
  background-color: black;
  line-height: 150%;
  padding: 0 4px; /* 可选：增强视觉可读性 */
}
</style><blockquote id="quote"></blockquote>

<script>
  const rebaz = ["something", "Hello", "BMW"];
  const rawText = "Hello testing something Hello testing something BMW test hello-world";

  document.getElementById('quote').innerHTML = 
    highlightWords(rawText, rebaz);
</script>

✅ 输出效果：

Hello testing something Hello testing something BMW test hello-world

→ 其中 "Hello"、"something"、"BMW" 被准确高亮，而 "hello-world"（因连字符破坏词边界）和 "test"（不在数组中）保持原样。

⚠️ 注意事项

词边界的限制：仅适用于 ASCII 字母、数字和下划线组成的“单词”。若需支持中文或中英混排的语义分词，建议改用 Intl.Segmenter 或第三方分词库（如 nodejieba 前端版），而非纯正则。
XSS 风险防范：本方案假设 text 来源可信。若 text 含用户输入，务必先对 HTML 实体进行编码（如使用 DOMPurify.sanitize() 或 textContent 回退策略）。
性能提示：对超长文本（>10KB）或大量关键词（>100 项），建议节流处理或分块渲染。