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>