在网页上找到一个词并为其添加一个跨度

Question

我一直在尝试搜索一个词并为其添加一个跨度以赋予它一些样式和功能，并且我找到了一种方法，但它不是很有效。

我有一个内容脚本正在搜索单词 searching，然后我将 innerHTML 替换为关键字的附加跨度。

这是我的 JS 文件：

function getText(){
return document.body.innerText
}
if(getText().indexOf("searching") > -1) {
  document.body.innerHTML = document.body.innerHTML.replace(new RegExp("searching", "g"),"<span class='spanDetected' id='spanDetected'>"+
    'searching'+"</span>");
  console.log("true");
}

结果是这样的：

所以它似乎在某种程度上起作用，但随后出现的问题是它还更改了 URLS 和文本框，如下所示：

为单词设置样式和添加功能的更好方法是什么？

Answer 1

使用 Regex 解析 [X]HTML 是 terrible idea。想象以下 HTML:

<div id="searching">A searching inspection</div>

您的程序将替换短语 'searching' 的两个实例，这不是您想要的。您需要解析页面并智能地替换节点。也许忽略超链接或使用覆盖 div 作为超链接节点

您有两个选择：

递归遍历所有节点.
使用 XPath 来 select 包含特定文本的节点。

类似这样的操作可以获得包含短语 'searching' 的所有节点。

//text()[contains(., 'searching')]

然后你可以遍历所有的节点，替换你想要的那个。由于您正在开发 Chrome 扩展，因此您可以使用 $x 来获取满足您的 XPath 条件的节点数组：

$x("//text()[contains(., 'searching')]")

阅读 this answer 了解如何循环遍历数组中的项目。

在网页上找到一个词并为其添加一个跨度

Find a word on a webpage and add a span to it

javascript

google-chrome

google-chrome-extension