HTML高亮关键字？是小意思！

前端

2023-11-17 22:47:37

在网页中高亮，本以为一个简单的innerHTML替换就能实现，但实际上却遇到了许多问题。本文将记录这些问题和最终的完美解决办法，希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，可以直接跳过过程，直接看结果。

问题

1. 关键词可能出现在HTML标签内

如果关键词出现在HTML标签内，直接替换innerHTML会破坏HTML结构，导致页面显示异常。

2. 关键词可能出现在脚本代码内

如果关键词出现在脚本代码内，直接替换innerHTML也会破坏脚本代码，导致脚本无法正常运行。

3. 关键词可能出现在样式代码内

如果关键词出现在样式代码内，直接替换innerHTML也会破坏样式代码，导致页面样式错乱。

4. 关键词可能出现在注释内

如果关键词出现在注释内，直接替换innerHTML也会破坏注释，导致页面显示异常。

解决办法

1. 使用正则表达式匹配关键词

可以使用正则表达式来匹配关键词，这样可以避免破坏HTML结构、脚本代码、样式代码和注释。

2. 使用DOM操作来替换关键词

可以使用DOM操作来替换关键词，这样可以更精确地控制替换的位置。

3. 使用闭包来保存关键词

可以使用闭包来保存关键词，这样可以在不同的函数中使用相同的关键词。

最终的解决方案

function highlightKeyword(keyword) {
  // 使用正则表达式匹配关键词
  var regex = new RegExp(keyword, "gi");

  // 使用闭包来保存关键词
  var closure = (function (keyword) {
    return function (node) {
      // 使用DOM操作来替换关键词
      node.innerHTML = node.innerHTML.replace(regex, "<span style='background-color: yellow'>" + keyword + "</span>");
    };
  })(keyword);

  // 遍历所有节点，并使用闭包来替换关键词
  document.querySelectorAll("*").forEach(closure);
}

// 使用函数来高亮关键词
highlightKeyword("关键词");