本文介绍如何使用 javascript 正则表达式动态识别并高亮 html 文本中出现在指定关键词数组中的单词，支持大小写不敏感、单词边界匹配，并可无缝集成自定义 css 样式。
本文介绍如何使用 javascript 正则表达式动态识别并高亮 html 文本中出现在指定关键词数组中的单词，支持大小写不敏感、单词边界匹配，并可无缝集成自定义 css 样式。
在实际开发中，我们常需对一段 HTML 内容（如 <blockquote> 中的文本）中特定关键词进行样式高亮——例如将数组 ["something", "Hello", "BMW"] 中出现的完整单词加亮显示，而忽略子串匹配（如 "Hello" 不应匹配 "HelloWorld"），同时保持其余文本原样渲染。
以下是一个健壮、可复用的解决方案：
✅ 核心实现：highlightWords() 函数
const highlightWords = (text, wordsToHighlight) => {
// 使用 确保单词边界，gi 实现全局 + 不区分大小写匹配
const regex = new RegExp(`\b(${wordsToHighlight.map(w =>
w.replace(/[.*+?^${}()|[]\]/g, '\$&') // 转义正则特殊字符
).join('|')})\b`, 'gi');
return text.replace(regex, '<span class="highlight">$1</span>');
};? 关键说明：
Javascript Sdk下载用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- \b 保证只匹配独立单词（避免 "he" 匹配 "hello"）；
- map(w => w.replace(...)) 对关键词中可能出现的正则元字符（如 .、*、[ 等）做安全转义，防止运行时报错或误匹配；
- $1 引用捕获组内容，确保原词大小写保留（如 "HELLO" 仍高亮为 "HELLO"，而非强制小写）。
✅ 应用示例
<style>
.highlight {
color: white;
background-color: black;
line-height: 150%;
padding: 2px 6px; /* 可选：提升可读性 */
border-radius: 3px;
}
</style>
<blockquote id="quote"></blockquote>
<script>
const rebaz = ["something", "Hello", "BMW"];
const originalText = "Hello testing something Hello testing something BMW test blockquote";
document.getElementById('quote').innerHTML = highlightWords(originalText, rebaz);
</script>✅ 渲染结果中，Hello、something 和 BMW 将被包裹在 <span class="highlight"> 中，应用黑色背景+白色文字样式；而 testing、test、blockquote（未在 rebaz 中）则保持普通文本。
立即学习“Java免费学习笔记（深入）”；
⚠️ 注意事项
- 该函数仅处理纯文本字符串；若原始内容含 HTML 标签（如 <strong>BMW</strong>），需先提取文本节点再处理，或使用 DOM 操作方案（如遍历 childNodes）避免破坏结构；
- 若需支持多语言/Unicode 单词边界（如中文分词），\b 不适用，应改用更复杂的分隔逻辑（如按空格/标点切分后比对）；
- 避免在大量文本或高频调用场景中重复构造正则——可将 regex 缓存为闭包变量以优化性能。
通过这一方案，你无需依赖第三方库，即可精准、安全、高效地实现关键词高亮，适用于博客摘要、代码文档、搜索结果标记等多种前端场景。
