如何让JavaScript特定单词高亮函数仅作用于指定class或id元素

修改方案 #

你当前的代码会作用于全站内容，是因为调用highlight函数时第一个参数传入了代表整个页面根节点的document.body，只需要将这个参数替换为你指定的类/ID对应的DOM元素即可。

核心调用代码修改 #

作用于指定class（.mytext）

// 选中所有类名为mytext的元素，逐个应用高亮效果
document.querySelectorAll('.mytext').forEach(targetElem => {
  highlight(targetElem, ['lorem', 'amet', 'autem']);
});

作用于指定ID（示例ID为myTextContainer）

// ID是唯一值，直接选中后传入即可
const targetElem = document.querySelector('#myTextContainer');
highlight(targetElem, ['lorem', 'amet', 'autem']);

完整演示代码 #

JavaScript代码

function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
  const flags = caseSensitive ? 'gi' : 'g';
  keywords.sort((a, b) => b.length - a.length);
  Array.from(elem.childNodes).forEach(child => {
    const keywordRegex = RegExp(keywords.join('|'), flags);
    if (child.nodeType !== 3) {
      highlight(child, keywords, caseSensitive, cls);
    } else if (keywordRegex.test(child.textContent)) {
      const frag = document.createDocumentFragment();
      let lastIdx = 0;
      child.textContent.replace(keywordRegex, (match, idx) => {
        const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
        const highlighted = document.createElement('span');
        highlighted.textContent = match;
        highlighted.classList.add(cls);
        frag.appendChild(part);
        frag.appendChild(highlighted);
        lastIdx = idx + match.length;
      });
      const end = document.createTextNode(child.textContent.slice(lastIdx));
      frag.appendChild(end);
      child.parentNode.replaceChild(frag, child);
    }
  });
}

// 仅作用于类名为mytext的元素
document.querySelectorAll('.mytext').forEach(elem => {
  highlight(elem, ['lorem', 'amet', 'autem']);
});

CSS代码

.highlight {
  background: lightpink;
}

HTML代码

<div class="mytext">
  <p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
  elit. Est vel accusantium 
  totam, ipsum delectus et dignissimos mollitia!</p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
  <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
  perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
  wall</small>
  </p>
  <div contenteditable="true">hello amet this</div>
</div>

<!-- 这段内容不在.mytext里，不会被应用高亮 -->
<p>这段内容的lorem和amet不会被高亮</p>

效果说明 #

只有包裹在<div class="mytext">内部的内容会触发关键词高亮，页面其他区域的相同关键词不会被处理。

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