在没有 .innerHTML 的情况下突出显示文本中的单词

Question

我需要使用 JavaScript 突出显示 HTML 文档中的文本，这将成为网络扩展的一部分。使用 .innerHTML 会导致审核过程被拒绝。参见 innerHTML Security considerations。

我需要将文本突出显示为 link:

<p>Lorem ipsum dolor sit amet</p>

⬇

addLinkWithoutInnerHTML('ipsum');

⬇

<p>Lorem <a href="/ipsum">ipsum</a> dolor sit amet</p>

如何在不使用 .innerHTML 的情况下完成此操作？

Answer 1

您可以通过 ipsum 正则表达式拆分文本内容，然后遍历每个匹配项：对于 not ipsum 的每个片段，插入包含该段文本的文本节点。对于ipsum，插入一个<span>并赋值给它的textContent。

const p = document.querySelector('p');
const pattern = new RegExp(/(.*?)(ipsum)/, 'gi');
const matches = p.textContent.split(pattern).filter(Boolean);

p.textContent = '';
for (const match of matches) {
  if (match === 'ipsum') {
    const a = p.appendChild(document.createElement('a'));
    a.textContent = match;
    a.href = '/ipsum';
  } else {
    p.appendChild(document.createTextNode(match));
  }
}

<p>Lorem ipsum dolor sit amet</p>

Answer 2

您可以使用 indexOf 查找元素的 textContent 中出现的所有字符串，并使用 appendChild 添加锚元素。

function addLink(el, text){
  let t = el.textContent;
  el.textContent = '';
  let idx, prev = 0;
  while((idx = t.indexOf(text, prev)) !== -1){
    el.append(t.slice(prev, idx));
    const a = document.createElement('a');
    a.href = '/' + text;
    a.textContent = text;
    el.appendChild(a);
    prev = idx + text.length;
  }
  el.append(t.slice(prev));
}
addLink(document.querySelector('p'), 'ipsum');

<p>Lorem ipsum dolor sit amet</p>

在没有 .innerHTML 的情况下突出显示文本中的单词

Highlight a word in a text without .innerHTML

javascript

innerhtml

firefox-addon-webextensions