搜索词高亮+自动展开对应折叠按钮功能实现求助

完整实现代码 #

首先添加高亮样式的CSS：

.highlight {
  background-color: #ffff00;
  font-weight: 600;
}

然后是整合所有功能的jQuery脚本：

$(document).ready(function() {
  // 折叠按钮基础功能（若未实现则添加）
  $(".collapsibleMSM").click(function() {
    $(this).toggleClass("active");
    const content = $(this).next(".MSMatterscontent");
    content.slideToggle();
  });

  // 转义正则表达式特殊字符
  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }

  // 搜索+高亮+自动展开逻辑
  $("#myInput").on("keyup", function() {
    const filter = $(this).val().trim().toLowerCase();
    
    $(".collapsibleMSM").each(function() {
      const $button = $(this);
      const $content = $button.next(".MSMatterscontent");
      const buttonText = $button.text().toLowerCase();
      const contentText = $content.text().toLowerCase();
      const hasMatch = filter === "" || buttonText.includes(filter) || contentText.includes(filter);

      if (filter === "") {
        // 清空输入时重置所有状态
        $button.show().removeClass("active");
        $content.hide();
        
        // 移除按钮高亮，恢复原始文本
        const originalBtnText = $button.data("original-text") || $button.text();
        $button.text(originalBtnText).removeData("original-text");
        
        // 移除内容段落高亮，恢复原始文本
        $content.find("p").each(function() {
          const originalParaText = $(this).data("original-text") || $(this).text();
          $(this).text(originalParaText).removeData("original-text");
        });
      } else {
        if (hasMatch) {
          // 显示并自动展开匹配项
          $button.show().addClass("active");
          $content.show();

          // 高亮按钮中的匹配文本
          const originalBtnText = $button.data("original-text") || $button.text();
          $button.data("original-text", originalBtnText);
          const highlightedBtnText = originalBtnText.replace(
            new RegExp(escapeRegExp(filter), "gi"),
            '<span class="highlight">$&</span>'
          );
          $button.html(highlightedBtnText);

          // 高亮内容段落中的匹配文本
          $content.find("p").each(function() {
            const $para = $(this);
            const originalParaText = $para.data("original-text") || $para.text();
            $para.data("original-text", originalParaText);
            const highlightedParaText = originalParaText.replace(
              new RegExp(escapeRegExp(filter), "gi"),
              '<span class="highlight">$&</span>'
            );
            $para.html(highlightedParaText);
          });
        } else {
          // 隐藏未匹配的项
          $button.hide();
          $content.hide();
        }
      }
    });
  });
});

关键功能说明 #

• 自动展开匹配项: 当搜索关键词命中某折叠项时，自动给按钮添加active类并展开内容区域。
• 全局高亮: 同时对按钮文本和内容段落中的匹配关键词添加高亮样式，支持大小写不敏感匹配。
• 状态重置: 清空搜索框时，所有折叠项恢复初始隐藏状态，移除所有高亮标记。
• 正则安全: 内置特殊字符转义函数，避免用户输入., *等字符导致正则解析错误。

注意事项 #

• 请修复HTML中存在的闭合标签错误（如</P></p>这类重复/大小写不一致的标签），避免DOM解析异常。
• 若已有折叠按钮的基础功能代码，可删除脚本中对应的$(".collapsibleMSM").click部分，避免冲突。

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