使用 window.find 获取所有事件答案

【问题标题】：Get all the occurrences with window.find使用 window.find 获取所有事件
【发布时间】：2020-09-21 12:48:05
【问题描述】：

我想在文本中突出显示我在 URL 中出现的所有单词。对于第一次出现，一切正常。但是我不知道怎么去下一个。

highlightText: function(urlParams) {
  var urlSearch = window.location.search;
  var urlParams = new URLSearchParams(urlSearch);
  var searchText = urlParams.get('search');
  if (window.find(searchText)) {
    var el = document.getElementById('collection-content');
    text = el.innerHTML;
    marked = text.replace(searchText, "<mark>" + searchText + "</mark>");
    el.innerHTML = marked;
  }
}

我尝试在 if 之前添加 while(window.find(searchText) 但它不起作用，它似乎只在我的单词第一次出现时循环。

提前致谢

【问题讨论】：

强制警告：window.find 是non-standard，使用风险自负。此外，它是错误的工具，因为它返回一个 boolean.
你能提供一个可以复制它的codesandbox.io吗？
你为什么要这样做？
@Jared：这听起来很合理，但它似乎确实在重新发明“ctrl + F”的轮子。这不一定是坏事，可能是一次很好的学习体验，但似乎有点多余，尤其是当你已经提到过——使用了错误的工具时。
听起来像XY Problem。如果您拥有网页，为什么不在呈现之前更改标记？

标签： javascript highlight find-occurrences

【解决方案1】：

如果你不使用正则表达式，那么它只会替换第一次出现，你可以试试这个，也可以根据你的需要修改正则表达式。

highlightText: function(urlParams) {
  var urlSearch = window.location.search;
  var urlParams = new URLSearchParams(urlSearch);
  var searchText = urlParams.get('search');
  if (window.find(searchText)) {
    var el = document.getElementById('collection-content');
    text = el.innerHTML;
    marked = text.replace(
      RegExp(`(${searchText})`),
      "<mark>" + searchText + " </mark>");
    el.innerHTML = marked;
  }
}

注意：匹配区分大小写

【讨论】：