如何通过点击按钮在JavaScript中高亮多个单词（忽略大小写）

核心实现思路 #

• 用正则表达式全局匹配+忽略大小写处理多个目标单词，解决仅匹配单个实例或区分大小写的问题
• 高亮时将匹配文本包裹在带样式的<span>标签中，同时留存原始文本内容，方便后续清除
• 清除高亮时直接还原原始DOM结构，避免残留高亮标签

完整代码示例 #

HTML结构

<div id="content">
  This Agreement outlines the terms of our contract. The AGREEMENT must be signed to confirm acceptance of these Terms.
</div>
<button id="highlightBtn">高亮指定单词</button>
<button id="clearBtn">清除高亮</button>

CSS样式

.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

JavaScript逻辑

// 硬编码的目标高亮单词数组
const targetWords = ['agreement', 'contract', 'terms'];
const contentEl = document.getElementById('content');
// 保存原始文本内容，用于清除高亮
contentEl.dataset.originalContent = contentEl.innerHTML;

// 高亮函数
document.getElementById('highlightBtn').addEventListener('click', () => {
  // 构造正则表达式：匹配数组中任意单词，全局+不区分大小写
  const regexPattern = new RegExp(`\\b(${targetWords.join('|')})\\b`, 'gi');
  // 替换匹配文本为带高亮样式的span
  contentEl.innerHTML = contentEl.dataset.originalContent.replace(regexPattern, '<span class="highlight">$1</span>');
});

// 清除高亮函数
document.getElementById('clearBtn').addEventListener('click', () => {
  // 还原为原始内容
  contentEl.innerHTML = contentEl.dataset.originalContent;
});

关键细节说明 #

• 正则表达式中的\\b是单词边界，避免匹配单词的部分字符（比如不会把"disagreement"里的"agreement"误匹配）
• gi标志：g表示全局匹配所有实例，i表示忽略大小写
• 原始内容存在元素的dataset属性中，确保每次高亮都基于初始文本，避免多次高亮导致的标签嵌套问题

内容的提问来源于stack exchange，提问作者Xonoxa