javascript - Vanilla Javascript 单击包含特定文本的 LI

Question

我有一些代码可以扫描网页并输出一个特殊的字符串，例如:multus –a –um在它执行的页面上有很多 <LI>包含 multus –a –um 等文本的元素但是，它们都是不同的。我需要一种方法来在页面中搜索包含特定字符串的元素，然后更改 <LI> 上的一些 CSS元素。

例子:

1. 我运行我的代码并得到:multus –a –um
2. 在页面中搜索 <LI>元素包含 multus –a –um
3. 将元素的背景更改为 #17af50

它也需要是一个函数，所以我可以很容易地运行它

Answer 1

看看各种 Array 方法。他们太棒了。

Array
  .from(document.querySelectorAll("li"))
  .filter(function(item){ return item.innerText.indexOf("foo") !== -1; })
  .forEach(function(item){ item.parentNode.classList.add("highlight"); });

.highlight { background-color: #17af50; }

<ul>
  <li>bar</li>
  <li>foo bar</li>
</ul>

<ul>
  <li>bar</li>
  <li>bar</li>
</ul>