如何使用JavaScript高亮blockquote中数组包含的指定单词

需求说明 #

仅对<blockquote>标签内文本中，存在于指定数组rebaz中的单词添加高亮样式，不在数组内的单词不做处理。

完整实现代码 #

1. JavaScript 逻辑

负责匹配指定单词并替换为高亮样式，同时处理页面中的所有blockquote元素：

// 高亮处理函数：将文本中指定单词替换为带高亮类的span
const highlightWords = (text, wordsToHighlight) => {
    // 空数组直接返回原文本，避免正则报错
    if (!wordsToHighlight.length) return text;
    // 构建正则表达式：匹配单词边界，忽略大小写
    const regex = new RegExp(`\\b(${wordsToHighlight.join('|')})\\b`, 'gi');
    // 执行替换
    return text.replace(regex, '<span class="highlight">$1</span>');
};

// 定义需要高亮的单词数组
const rebaz = ["Hello", "Volvo", "testing", "blockquote"];

// 页面加载完成后处理所有blockquote元素
document.addEventListener('DOMContentLoaded', () => {
    const blockquotes = document.querySelectorAll('blockquote');
    blockquotes.forEach(blockquote => {
        const originalText = blockquote.textContent.trim();
        const highlightedContent = highlightWords(originalText, rebaz);
        blockquote.innerHTML = highlightedContent;
    });
});

2. CSS 高亮样式

自定义高亮的视觉效果，可根据需求调整：

.highlight {
    background-color: #ffeb3b;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

3. HTML 示例

<blockquote>
 Hello testing something Hello testing something Hello testing something 
</blockquote>
<blockquote>
 I drive a Volvo every day, and I once saw a BMW on the road.
</blockquote>

效果说明 #

• 第一个blockquote中，Hello和testing属于rebaz数组，会被添加高亮样式；something不在数组内，保持原样。
• 第二个blockquote中，Volvo会被高亮，BMW不在数组内，无高亮效果。

注意事项 #

• 正则中的\b是单词边界，仅匹配独立单词，不会匹配单词片段（比如不会把test当成testing的一部分匹配）。
• 如果rebaz数组包含带特殊字符（如-、.）的单词，需要先对特殊字符进行转义，避免正则语法错误。
• 若blockquote内包含其他HTML元素，当前代码会替换掉原有元素；如需保留原有元素结构，需递归遍历文本节点进行处理。

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