如何在浏览器中高亮非连续文本？快捷键还是代码实现？

• 原生浏览器的限制
  大部分主流浏览器（Chrome、Firefox、Edge等）原生不支持通过快捷键直接选中并高亮非连续的文本片段——你尝试的Ctrl/Command键配合鼠标，只能选中整个独立元素（比如完整段落、链接、列表项），没法选分散的文本片段。如果不想写代码，你可以用浏览器的标注类扩展来实现这个功能，这类插件通常支持选中任意非连续文本并添加高亮。

• 代码实现方案
  如果要在自己的网页里开发这个功能，核心思路是用JavaScript监听选区变化，记录用户选中的文本片段，然后通过DOM操作给这些片段添加高亮样式，同时保持页面布局不变。

举个简单的实现示例：

// 存储已选中的高亮范围
const highlightedRanges = [];

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (!selection.rangeCount || selection.isCollapsed) return;

  const range = selection.getRangeAt(0);
  // 避免重复高亮同一区域
  if (!highlightedRanges.some(r => isRangeEqual(r, range))) {
    const highlight = document.createElement('span');
    highlight.style.backgroundColor = 'yellow';
    highlight.classList.add('custom-highlight');
    range.surroundContents(highlight);
    highlightedRanges.push(range);
  }
  selection.removeAllRanges();
});

// 辅助函数：判断两个选区范围是否相同
function isRangeEqual(range1, range2) {
  return range1.startContainer === range2.startContainer &&
         range1.startOffset === range2.startOffset &&
         range1.endContainer === range2.endContainer &&
         range1.endOffset === range2.endOffset;
}

这段代码会在用户选中文本后，自动给选中的片段加上黄色高亮，并且可以多次选中不同的非连续区域。如果需要支持取消高亮，可以额外添加点击高亮区域移除样式的逻辑。

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