Chrome 扩展：如果元素包含特定文本，则向元素添加样式答案

【问题标题】：Chrome extension: Add style to element if it contains particular textChrome 扩展：如果元素包含特定文本，则向元素添加样式
【发布时间】：2019-11-29 10:51:09
【问题描述】：

我只想在元素包含特定字符串的情况下为其添加样式。即 if(el contains str) {el:style}.

如果我只想将包含 w3.org 的链接设为粉红色，我将如何在 innerHTML 中找到 <a href="http://www.w3.org/1999/xhtml">article < /a>，然后在页面上设置“文章”一词的样式。

到目前为止，我可以将所有链接变为粉红色，但我无法选择性地定位包含“www.w3.org”的链接。

var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
  links[i].style["color"] = "#FF00FF";
}

我如何将它仅应用于包含字符串“w3.org”的元素？

一开始我以为这会很简单！感谢您提供任何和所有帮助。

【问题讨论】：

标签： html css google-chrome dom innerhtml

【解决方案1】：

虽然您在查找初始列表时无法通过非精确的 href 值进行过滤，也无法通过包含的文本进行过滤，但您可以在事后使用纯 javascript 过滤列表：

var links = [...document.body.getElementsByTagName("a")];
for (var i = 0; i < links.length; i++) {
  if (links[i]['href'].indexOf('www.w3.org') == -1) { continue };
  links[i].style["color"] = "#FF00FF";
}

假设您要按 href 过滤，即。如果您指的是文字文本，则可以改用 links[i]['text']。

【讨论】：

AAAHHH 成功了！谢谢你。这让我快疯了。