突出显示没有 .innerHTML 的文本中的单词答案

【问题标题】：Highlight a word in a text without .innerHTML突出显示没有 .innerHTML 的文本中的单词
【发布时间】：2020-12-04 18:37:55
【问题描述】：

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

我需要将文本突出显示为链接：

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

⬇

addLinkWithoutInnerHTML('ipsum');

⬇

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

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

【问题讨论】：

你能和addLinkWithoutInnerHTML分享你目前正在尝试的东西吗
什么都没有。我还没有写过这个函数jet。这只是一个例子

标签： javascript innerhtml firefox-addon-webextensions

【解决方案1】：

您可以使用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');

&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;

【讨论】：

【解决方案2】：

您可以通过 ipsum 正则表达式拆分文本内容，然后遍历每个匹配项：对于每个非 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));
  }
}

&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;

【讨论】：

两个答案都很好，他们解决了最初的问题。谢谢你。我只是想知道没有保留换行符（\n）。我可能应该在一个单独的线程中问。