MDN项目：深入解析CSS Custom Highlight API

概述

CSS Custom Highlight API是现代Web开发中一个强大的文本处理工具，它允许开发者通过JavaScript创建任意文本范围，并使用CSS来样式化这些范围。这项技术为文本编辑器、协作工具、语法高亮等场景提供了原生支持，无需操作DOM即可实现复杂文本高亮效果。

核心概念

与传统高亮方式的区别

传统文本高亮通常需要修改DOM结构，比如添加<span>元素并应用样式。这种方式存在几个问题：

1. 频繁操作DOM影响性能
2. 可能破坏原有的DOM结构
3. 难以管理动态变化的高亮

CSS Custom Highlight API通过将高亮逻辑与DOM分离，完美解决了这些问题。

工作原理

该API基于四个关键步骤：

1. 创建Range对象定义文本范围
2. 创建Highlight对象管理这些范围
3. 在HighlightRegistry中注册高亮
4. 使用CSS伪元素样式化高亮内容

详细使用指南

1. 创建文本范围

首先需要创建Range对象来定义要高亮的文本区域：

const paragraph = document.querySelector('p');
const myRange = new Range();

// 设置范围从第10个字符到第20个字符
myRange.setStart(paragraph.firstChild, 10);
myRange.setEnd(paragraph.firstChild, 20);

2. 创建高亮对象

将Range对象包装为Highlight对象，一个Highlight可以包含多个Range：

const highlight = new Highlight(myRange, anotherRange);

3. 注册高亮

通过全局的HighlightRegistry注册高亮，并指定一个自定义名称：

CSS.highlights.set('important-text', highlight);

4. 样式化高亮

使用::highlight伪元素为注册的高亮添加样式：

::highlight(important-text) {
  background-color: #ffeb3b;
  text-decoration: underline wavy red;
}

实际应用示例

协作编辑系统中的用户高亮

在协作编辑场景中，可以为不同用户创建不同的高亮样式：

// 为每个用户创建独立的高亮
const aliceHighlight = new Highlight(aliceRange1, aliceRange2);
const bobHighlight = new Highlight(bobRange1);

// 注册高亮
CSS.highlights.set('alice', aliceHighlight);
CSS.highlights.set('bob', bobHighlight);

/* 为不同用户设置不同样式 */
::highlight(alice) {
  background-color: rgba(255, 0, 0, 0.3);
}

::highlight(bob) {
  background-color: rgba(0, 0, 255, 0.3);
}

高级搜索高亮实现

下面是一个完整的搜索高亮实现，展示如何处理动态搜索：

document.getElementById('search').addEventListener('input', (e) => {
  const searchTerm = e.target.value.trim();
  
  if (!searchTerm) {
    CSS.highlights.clear();
    return;
  }
  
  // 查找所有匹配的文本范围
  const ranges = findTextRanges(searchTerm);
  const highlight = new Highlight(...ranges);
  
  CSS.highlights.set('search-results', highlight);
});

function findTextRanges(text) {
  const walker = document.createTreeWalker(
    document.body, 
    NodeFilter.SHOW_TEXT
  );
  
  const ranges = [];
  let node;
  
  while (node = walker.nextNode()) {
    let pos = 0;
    const content = node.textContent.toLowerCase();
    const searchText = text.toLowerCase();
    
    while (pos < content.length) {
      const index = content.indexOf(searchText, pos);
      if (index === -1) break;
      
      const range = new Range();
      range.setStart(node, index);
      range.setEnd(node, index + searchText.length);
      ranges.push(range);
      
      pos = index + searchText.length;
    }
  }
  
  return ranges;
}

性能优化建议

1. 批量操作：尽量一次性创建所有Range后再创建Highlight对象
2. 合理清理：不再需要的高亮应及时从注册表中移除
3. 节流处理：对高频操作（如实时搜索）进行适当节流
4. 范围限制：只在必要的内容区域进行文本搜索和高亮

浏览器兼容性考虑

目前主流现代浏览器已逐步支持CSS Custom Highlight API，但在生产环境中使用时应该：

1. 检测API可用性：

if (!CSS.highlights) {
  // 提供降级方案
}

2. 为不支持的环境提供替代方案，比如传统的span元素高亮方式

总结

CSS Custom Highlight API为Web文本处理带来了革命性的改进，它：

1. 实现了样式与结构的分离
2. 提供了更高效的文本高亮方案
3. 支持复杂的高亮场景管理
4. 保持了良好的性能特性

对于需要精细文本操作的Web应用，如在线编辑器、协作工具、教育应用等，这项技术都值得深入研究和应用。