JS 页面内容搜索，类似于 Ctrl+F功能的实现代码

实现类似于 Ctrl+F 功能的 JS 页面内容搜索，需要基于两个核心 API：window.find() 和 window.getSelection()。

window.find()

window.find() 方法用于在当前页面中查找指定的字符串，并返回一个布尔值表示是否检索到该字符串。该方法可以接收三个参数，依次为：

• 要查找的字符串
• 是否区分大小写（可选，true 或 false，默认为 false）
• 是否在父容器内查找（可选，true 或 false，默认为 false）

示例1：简单使用 window.find() 方法

if (window.find("搜索的内容")) {
  console.log("找到了");
} else {
  console.log("未找到");
}

window.getSelection()

window.getSelection() 方法用于获取用户当前选中的文本内容，返回一个 Selection 对象。该对象包含被选中的文本、选中文本的起始和结束节点、选中文本选中时光标的位置等信息。文本内容可以通过 Selection.toString() 方法获取。

示例2：基于 window.getSelection() 实现高亮显示搜索内容

<input type="text" id="searchInput" placeholder="请输入想要搜索的内容">
<button onclick="search()">搜索</button>
<div>
  <p>这是一段文本，里面可能包含要搜索的内容。</p>
  <p>这是一段更长的文本，里面也可能包含要搜索的内容。</p>
  <p>这是最后一段文本。</p>
</div>

<script>
function search() {
  const input = document.getElementById("searchInput");
  const query = input.value;

  if (!query) return;

  const div = document.querySelector("div");
  div.innerHTML = div.innerHTML.replace(/<span class="highlight">(.+?)<\/span>/g, "$1");

  const paragraphs = div.querySelectorAll("p");
  for (const p of paragraphs) {
    const text = p.textContent;
    const pattern = new RegExp(`(${query})`, "gi");
    const matches = text.match(pattern);

    if (matches) {
      const range = document.createRange();
      range.selectNodeContents(p);

      for (const match of matches) {
        const startIdx = text.indexOf(match);
        range.setStart(p.firstChild, startIdx);
        range.setEnd(p.firstChild, startIdx + match.length);

        const span = document.createElement("span");
        span.classList.add("highlight");
        span.appendChild(range.extractContents());
        range.insertNode(span);
      }
    }
  }
}
</script>

<style>
  .highlight {
    background-color: yellow;
  }
</style>

在这个示例中，我们使用了 window.getSelection() 方法获取用户选中的文本内容，然后使用 Range 对象将搜索到的内容高亮显示，并将查找的关键词包裹在 span.highlight 元素中，以便于后续的 CSS 样式调整。