如何用jQuery检测浏览器查找关键词高亮事件并触发自定义动作？

首先明确：浏览器原生的Ctrl+F/Cmd+F查找高亮没有公开的可监听事件，无法直接用jQuery检测到这个高亮完成的动作。但可以通过自定义实现页面搜索功能来达成需求，以下是具体方案：

一、原生查找的局限 #

浏览器内置的查找功能属于浏览器层面的特性，不会向页面暴露任何DOM事件或API来通知开发者“高亮已完成”。原生高亮是浏览器在渲染层做的视觉标记，不会修改页面DOM结构，所以jQuery（或原生JS）无法直接捕获这个动作。

二、自定义搜索替代方案 #

自己实现页面内搜索逻辑，就能完全控制搜索匹配、高亮样式及后续自定义动作。以下是jQuery实现的示例：

1. HTML结构（添加搜索控件） #

<!-- 新增搜索框和控制按钮 -->
<div class="custom-search">
  <input type="text" id="search-input" placeholder="输入关键词搜索">
  <button id="prev-btn">上一个</button>
  <button id="next-btn">下一个</button>
</div>

<!-- 原页面内容 -->
<h2>Section with a Paragraph</h2>
<p>Here is some text content</p>
<h2>Section with a Div and Mixed Content</h2>
<div>
  <h3>Heading</h3>
  <p>Here is some content with text and a link.</p>
  <p><a href="https://duckduckgo.com" target="_blank">Duck Duck Go</a></p>
  <p>Pink</p>
</div>
<h2>Section with a List</h2>
<ul>
  <li>Dogs</li>
  <li>Cats</li>
</ul>
<h2>Section with an article</h2>
<article>
  <p>This is an <code>&lt;article&gt;</code> element</p>
  <p>Pink</p>
</article>

2. CSS样式（自定义高亮） #

.custom-highlight {
  color: red;
  font-weight: bold;
  background-color: yellow; /* 可选，增强视觉提示 */
}
.current-match {
  outline: 2px solid blue; /* 标记当前选中的匹配项 */
}

3. jQuery代码实现 #

$(function() {
  let currentMatchIndex = -1;
  let matches = [];

  // 重置所有高亮标记
  function resetHighlight() {
    $('.custom-highlight').replaceWith(function() {
      return this.textContent;
    });
    currentMatchIndex = -1;
    matches = [];
  }

  // 执行搜索并添加自定义高亮
  function performSearch(keyword) {
    resetHighlight();
    if (!keyword.trim()) return;

    const regex = new RegExp(`(${keyword})`, 'gi');
    // 遍历页面文本节点，排除脚本、样式、代码标签
    $('body *:not(script, style, code)').contents().each(function() {
      if (this.nodeType === Node.TEXT_NODE && this.textContent.trim()) {
        const text = this.textContent;
        if (text.match(regex)) {
          // 用带样式的span替换原文本节点
          const newHtml = text.replace(regex, '<span class="custom-highlight">$1</span>');
          $(this).replaceWith(newHtml);
        }
      }
    });
    // 收集所有匹配元素
    matches = $('.custom-highlight');
  }

  // 切换匹配结果（上一个/下一个）
  function toggleMatch(direction) {
    if (matches.length === 0) return;
    // 移除当前匹配的额外标记
    $(matches[currentMatchIndex]).removeClass('current-match');
    // 计算新的匹配项索引
    currentMatchIndex += direction;
    if (currentMatchIndex >= matches.length) currentMatchIndex = 0;
    if (currentMatchIndex < 0) currentMatchIndex = matches.length - 1;
    // 高亮当前匹配并滚动到视图内
    const currentMatch = $(matches[currentMatchIndex]);
    currentMatch.addClass('current-match');
    $('html, body').animate({
      scrollTop: currentMatch.offset().top - 50
    }, 300);
  }

  // 搜索框输入事件监听
  $('#search-input').on('input', function() {
    performSearch($(this).val());
  });

  // 上下切换按钮事件
  $('#prev-btn').on('click', function() {
    toggleMatch(-1);
  });
  $('#next-btn').on('click', function() {
    toggleMatch(1);
  });

  // 拦截原生Ctrl+F/Cmd+F，唤起自定义搜索框
  $(document).on('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
      e.preventDefault();
      $('#search-input').focus();
    }
  });
});

方案说明 #

• 拦截原生查找快捷键，替换为自定义搜索框
• 输入关键词时自动遍历页面文本，用自定义样式包裹匹配内容
• 支持上/下切换匹配结果，并自动滚动到目标位置
• 完全可控，可在搜索完成后添加任意自定义动作（比如统计匹配数量、弹窗提示等）

三、原生查找的hack尝试（不推荐） #

如果非要基于原生查找做修改，没有可靠的实现方式：

• 原生高亮不会修改DOM结构，Mutation Observer无法监听
• 监听scroll或键盘事件只能间接猜测操作时机，无法准确判断高亮完成的状态，兼容性极差，不建议使用。

内容的提问来源于stack exchange，提问作者DeanH