如何使用 vanilla javascript 从不同元素（不仅仅是一个）搜索并突出显示 HTML 页面中的文本？

Question

我想使用网页上的搜索栏搜索文本、单词或字母，该搜索栏突出显示我搜索的单词或页面上的字母，我看到了相同的教程，但它们仅使用一个元素（例如包含文本的段落），我的问题是我有几个元素并且其中有文本？

我都在寻找能够解决我的问题的普通 JavaScript 代码。

        <div>
            <input type="text" placeholder="Search..." onblur="search()">
        </div>

Answer 1

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
   inputText.innerHTML = innerHTML;
  }
}

.highlight {
  background-color: yellow;
}

<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
  The fox went over the fence
</div>

来源：如何使用javascript突出显示文本