如何用JavaScript高亮blockquote中匹配指定数组的词汇？

核心思路 #

遍历页面中所有<blockquote>元素，将其中与指定数组rebaz完全匹配的词汇，用带高亮样式的<span>标签包裹，其余内容保持原样。

完整代码实现 #

.highlight {
  color:white;
  background:black;
  line-height: 150%;
}

<blockquote>
 Hello testing something Hello testing something Hello testing something Hello testing something Hello testing something Hello testing something Hello testing something BMW test bmw
</blockquote>

// 目标匹配词汇数组
const rebaz = ["something", "Hello", "BMW"];

// 获取所有blockquote元素
const blockquotes = document.querySelectorAll('blockquote');

// 遍历处理每个blockquote
blockquotes.forEach(blockquote => {
  // 保存原始文本内容
  let text = blockquote.textContent;
  
  // 构建正则表达式：匹配数组中的词汇，添加单词边界避免部分匹配，全局匹配
  // 若需要忽略大小写，可在正则末尾加 'i'，即 new RegExp(`\\b(${rebaz.join('|')})\\b`, 'gi')
  const regex = new RegExp(`\\b(${rebaz.join('|')})\\b`, 'g');
  
  // 替换匹配到的词汇，包裹高亮span标签
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
  
  // 更新blockquote的内容
  blockquote.innerHTML = highlightedText;
});

关键说明 #

• 使用\\b单词边界确保只匹配完整词汇，避免出现类似将"BMWxyz"中的"BMW"误匹配的情况
• 若需要忽略大小写匹配（比如文本中的"bmw"也需要高亮），只需将正则表达式的标志从'g'改为'gi'
• 遍历所有<blockquote>元素，确保页面中所有符合条件的区块都被处理

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