文字选中高亮的5种JS实现方式

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《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，只高亮未高亮的部分
}

如何实现撤销高亮功能？

撤销高亮其实就是移除之前添加的span标签。关键在于记录哪些文本被高亮了，以及它们对应的span标签。

1. 保存高亮信息： 可以在一个数组中保存每个高亮区域的起始位置、结束位置以及对应的span标签。
2. 监听撤销操作： 添加一个撤销按钮，点击时从数组中找到最后一次高亮的区域，移除对应的span标签，并更新数组。
3. 优化性能： 如果高亮区域很多，撤销操作可能会比较慢。可以考虑使用requestAnimationFrame优化UI更新，避免阻塞主线程。

一个简单的撤销实现：

let highlights = []; // 保存高亮信息

function undoHighlight() {
  if (highlights.length === 0) return;

  const lastHighlight = highlights.pop();
  const span = lastHighlight.span;
  const parent = span.parentNode;
  const text = document.createTextNode(span.textContent);

  parent.replaceChild(text, span); // 移除span，恢复原始文本
}

如何处理跨标签的高亮？

用户选择的文本可能跨越多个HTML标签，例如p标签、span标签、strong标签等。这种情况的处理比较复杂，需要考虑以下几个方面：

1. 获取所有选中的节点： 使用Range.commonAncestorContainer和Range.startContainer、Range.endContainer获取选区内的所有节点。
2. 判断节点类型： 区分文本节点和元素节点，只处理文本节点。
3. 分割文本节点： 如果选区只覆盖了文本节点的一部分，需要将文本节点分割成多个部分，只高亮选中的部分。
4. 重建DOM结构： 将高亮后的文本节点重新插入到DOM树中，保持原始的DOM结构不变。

处理跨标签高亮的难点在于DOM操作的复杂性。需要仔细处理各种边界情况，确保高亮后的DOM结构仍然有效。可以考虑使用DocumentFragment来优化DOM操作，减少浏览器的重绘和重排。

高亮方案的性能优化有哪些策略？

高亮操作涉及到大量的DOM操作，如果处理不当，可能会导致页面性能下降。以下是一些性能优化策略：

1. 减少DOM操作： 尽量避免频繁的DOM操作。可以使用DocumentFragment来批量更新DOM，减少浏览器的重绘和重排。
2. 使用CSS优化： 使用CSS来实现高亮效果，例如background-color和color属性。避免使用复杂的CSS样式，例如box-shadow和text-shadow，这些样式可能会影响性能。
3. 懒加载： 如果页面上有大量文本需要高亮，可以考虑使用懒加载策略。只高亮当前可视区域内的文本，当用户滚动页面时再高亮其他区域的文本。
4. 节流和防抖： 对于频繁触发的事件，例如scroll和resize，可以使用节流和防抖技术来减少事件处理函数的执行次数。
5. 避免使用innerHTML： 尽量避免使用innerHTML来更新DOM，因为它会重新解析整个HTML字符串，导致性能下降。可以使用createElement和appendChild等方法来手动创建DOM节点。

如何兼容不同的浏览器？

不同的浏览器对Selection API的支持程度可能有所不同。为了确保高亮功能在所有浏览器上都能正常工作，需要进行一些兼容性处理：

1. 使用polyfill： 可以使用polyfill来弥补不同浏览器之间的差异。例如，可以使用selection-polyfill来提供统一的Selection API。
2. 检测浏览器特性： 可以使用typeof运算符来检测浏览器是否支持某个API。如果不支持，可以使用备选方案。
3. 使用try...catch语句： 可以使用try...catch语句来捕获可能出现的异常。例如，某些浏览器可能不支持getRangeAt方法。

总的来说，js实现文字选中高亮需要综合考虑用户体验、性能和兼容性。没有一劳永逸的解决方案，需要根据实际情况选择合适的策略。

文中关于JS,文本高亮的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《文字选中高亮的5种JS实现方式》文章吧，也可关注golang学习网公众号了解相关技术文章。