CSS中如何用::selection实现搜索高亮

解决方案

实现数据高亮搜索的核心在于“动态识别”和“结构化标记”，这通常意味着需要JavaScript介入来处理文本内容，并结合CSS进行样式渲染。::selection虽然是CSS的一部分，但它的作用是“用户选中文本时的样式”，而非“程序自动识别并高亮特定文本”。

因此，正确的解决方案流程是：

1. 获取搜索关键词：从用户输入或预设条件中获取需要高亮的文本。
2. 定位目标文本：使用JavaScript遍历或查找页面上需要进行搜索的文本内容。
3. 动态包裹匹配项：当找到与关键词匹配的文本时，使用JavaScript将其用一个特定的HTML标签（例如...或...）包裹起来。
4. 应用高亮样式：在CSS中为这个特定的HTML标签定义高亮样式，如背景色、文字颜色等。
5. 提供清除机制：在搜索条件变化或清除时，移除之前添加的高亮标签，恢复原始文本结构。

为什么::selection不能直接用于搜索高亮？

这是一个常见的误解，我个人觉得，很多人看到::selection能改变文本颜色和背景色，就自然而然地联想到搜索高亮。但它们本质上是两码事。::selection是CSS的一个伪元素，它只能控制用户“主动选择”的文本区域的样式。比如你用鼠标拖拽选中了一段文字，::selection的样式就会生效。

它的核心局限在于：

• 非程序性触发：它不能被JavaScript或者其他程序逻辑“触发”来选择特定的文本。它完全依赖于用户的交互行为。
• 瞬时性：当用户取消选择（比如点击页面其他地方）时，::selection的样式就会立即消失。而搜索高亮通常是需要持久化显示，直到搜索条件改变或用户主动清除。
• 无法定位特定内容：::selection没有能力去“查找”页面中所有符合某个条件的文本，然后给它们加上样式。它只是一个样式规则，作用于浏览器已识别的“选区”。

所以，如果你想实现的是用户输入一个词，然后页面上所有这个词都亮起来，::selection是无能为力的。它更像是浏览器提供的一个“用户体验定制”功能，让你能自定义用户选中文字时的视觉反馈，而不是一个内容查找和标记工具。

那么，实现搜索高亮的正确姿势是什么？

既然::selection不适用，那我们得回归到JavaScript和常规CSS的组合拳。这才是实现动态搜索高亮的正道。

核心思路是：

1. JavaScript负责“找”和“包”：

   • 获取用户输入的搜索词。

   • 找到页面上所有可能包含这个词的文本节点（或者特定的容器元素）。

   • 使用正则表达式（RegExp）进行全局匹配，这是处理文本搜索的利器。

   • 将匹配到的文本用一个新的HTML元素（比如）包裹起来。这一步通常会涉及到DOM操作，比如innerHTML的替换，或者更精细的文本节点拆分与插入。

   • 一个简单的JavaScript示例（概念性）：

     function highlightText(searchText, targetElementId) {
         const targetElement = document.getElementById(targetElementId);
         if (!targetElement || !searchText) return;
     
         // 清除之前的高亮，避免重复
         removeHighlights(targetElementId);
     
         const originalHTML = targetElement.innerHTML;
         // 注意：这里只是一个简化示例，直接替换innerHTML可能破坏事件绑定等
         // 实际应用中需要更健壮的DOM遍历和文本节点操作
         const regex = new RegExp(searchText, 'gi'); // 'g'全局匹配，'i'忽略大小写
         const highlightedHTML = originalHTML.replace(regex, `$&`);
         targetElement.innerHTML = highlightedHTML;
     }
     
     function removeHighlights(targetElementId) {
         const targetElement = document.getElementById(targetElementId);
         if (!targetElement) return;
         // 找到所有高亮元素并移除其包裹
         const highlightedSpans = targetElement.querySelectorAll('.highlight');
         highlightedSpans.forEach(span => {
             const parent = span.parentNode;
             while (span.firstChild) {
                 parent.insertBefore(span.firstChild, span);
             }
             parent.removeChild(span);
         });
         // 或者，如果之前保存了原始HTML，直接恢复
         // targetElement.innerHTML = savedOriginalHTML;
     }
     
     // 假设有一个输入框和按钮
     // document.getElementById('searchButton').addEventListener('click', () => {
     //     const searchTerm = document.getElementById('searchInput').value;
     //     highlightText(searchTerm, 'contentArea');
     // });

2. CSS负责“亮”：

   • 为JavaScript添加的highlight类定义样式。
   • 这部分就非常直接了，就像你平时写CSS一样。
   • 一个简单的CSS示例：

     .highlight {
         background-color: #ffeb3b; /* 醒目的黄色 */
         color: #333; /* 确保文字清晰可见 */
         font-weight: bold; /* 也可以加粗 */
         padding: 0 2px; /* 稍微增加一点内边距，让高亮更明显 */
         border-radius: 2px; /* 轻微圆角 */
     }

     这种方法虽然需要JavaScript的参与，但它提供了极大的灵活性和控制力，能够满足各种复杂的搜索高亮需求，包括大小写不敏感、全词匹配、多关键词高亮等。

如何处理高亮后的交互和清除？

高亮搜索不仅仅是把文字变个色那么简单，实际应用中，用户可能还需要“清除高亮”或者“跳转到下一个高亮处”。这同样是JavaScript的舞台。

清除高亮： 清除高亮是搜索功能中不可或缺的一环。最直接的方式是在每次新的搜索开始前，或者用户点击“清除”按钮时，将之前添加的highlight类或标签移除，恢复页面到原始状态。

• 策略1：替换回原始HTML：如果你在进行高亮前保存了目标元素的原始HTML内容，那么清除时直接将原始HTML重新赋值给目标元素即可。这通常是最简单粗暴但也有效的方式，尤其是在内容不频繁变动且事件绑定不复杂的情况下。

• 策略2：遍历移除高亮标签：更精细的做法是，找到所有带有highlight类的标签，然后将它们内部的文本内容“提”出来，替换掉标签本身。这样可以避免不必要的DOM重绘，对性能有益，尤其是在内容比较大时。

  // 假设这是清除高亮的代码片段
  function clearAllHighlights() {
      const highlightedElements = document.querySelectorAll('.highlight');
      highlightedElements.forEach(el => {
          const parent = el.parentNode;
          // 将高亮元素内部的文本节点移到高亮元素外部，然后移除高亮元素
          while (el.firstChild) {
              parent.insertBefore(el.firstChild, el);
          }
          parent.removeChild(el);
      });
  }
  // 可以在搜索框内容为空时，或者用户点击“清空”按钮时调用此函数

高亮之间的导航： 对于长文章，用户可能希望能够快速跳转到下一个或上一个匹配项。

• 实现思路：

  1. 在执行高亮操作后，收集所有被高亮的元素（例如，document.querySelectorAll('.highlight')）。
  2. 将这些元素存储在一个数组中，并维护一个当前索引，表示用户当前查看的是第几个高亮。
  3. 当用户点击“下一个”或“上一个”按钮时，根据索引调整到相应的元素。
  4. 使用element.scrollIntoView({ behavior: 'smooth', block: 'center' })方法，让浏览器平滑滚动到目标高亮元素的位置，并使其居中显示。
  5. 可以考虑给当前活动的高亮元素额外添加一个类（比如current-highlight），用不同的样式（例如边框或更深的背景色）来突出显示它，提升用户体验。

  let currentHighlightIndex = -1;
  let allHighlights = [];
  
  function navigateHighlights(direction) { // direction: 'next' or 'prev'
      if (allHighlights.length === 0) return;
  
      // 移除旧的当前高亮样式
      if (currentHighlightIndex !== -1 && allHighlights[currentHighlightIndex]) {
          allHighlights[currentHighlightIndex].classList.remove('current-highlight');
      }
  
      if (direction === 'next') {
          currentHighlightIndex = (currentHighlightIndex + 1) % allHighlights.length;
      } else if (direction === 'prev') {
          currentHighlightIndex = (currentHighlightIndex - 1 + allHighlights.length) % allHighlights.length;
      }
  
      const targetHighlight = allHighlights[currentHighlightIndex];
      if (targetHighlight) {
          targetHighlight.classList.add('current-highlight');
          targetHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
  }
  
  // 每次执行 highlightText 后，更新 allHighlights 数组
  // allHighlights = Array.from(document.querySelectorAll('.highlight'));
  // currentHighlightIndex = -1; // 重置索引

这些都是在实际开发中需要考虑的细节，确保搜索高亮功能不仅可用，而且用户体验良好。它远不止一个CSS伪元素那么简单，而是JavaScript与CSS协作的典型场景。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~