js如何实现文字选中高亮 文本高亮的5种实现技巧！

js实现文字选中高亮的核心在于监听mouseup事件并获取selection信息，再用span包裹选中文字添加样式。1. 处理重叠高亮时可采用分割策略，仅高亮未覆盖部分；2. 实现撤销功能需记录高亮信息并移除对应span；3. 跨标签高亮需遍历节点并分割文本节点；4. 性能优化可通过减少dom操作、使用css和懒加载等方式；5. 兼容不同浏览器可借助polyfill和特性检测。上述策略需综合考虑用户体验与性能平衡。

js实现文字选中高亮，核心在于监听mouseup事件，获取选区（Selection）信息，然后用span标签包裹选中的文字并添加高亮样式。简单来说，就是侦测到用户松开鼠标时，看看有没有文字被选中，有的话就给它穿件“高亮马甲”。

文本高亮的5种实现技巧！

如何优雅地处理多个高亮区域的重叠问题？

假设用户先高亮了“JavaScript很有趣”，然后又高亮了“很有趣的代码”，那么“很有趣”这部分就会出现重叠。一种比较好的处理方式是，每次高亮前，先检查选区内是否已经存在高亮span标签。如果存在，可以采取不同的策略：

1. 完全覆盖： 直接移除旧的span，用新的span覆盖。简单粗暴，但可能不符合用户预期。
2. 分割： 将选区分割成多个不重叠的区域，只高亮未高亮的部分。实现起来比较复杂，但用户体验更好。
3. 合并： 如果新选区和旧选区相邻或部分重叠，尝试将它们合并成一个更大的高亮区域。需要仔细处理边界情况。

实际操作中，分割可能是更稳妥的选择，它能更灵活地应对各种复杂情况。以下是一个分割高亮区域的思路（伪代码）：

function highlightSelection() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  // 1. 遍历range内的所有节点
  // 2. 如果节点是文本节点，判断是否已经被高亮
  // 3. 如果未被高亮，创建新的span并插入
  // 4. 如果已经被高亮，分割range，只高亮未高亮的部分
}