js实现文字选中高亮的核心在于监听mouseup事件并获取selection信息，再用span包裹选中文字添加样式。1. 处理重叠高亮时可采用分割策略，仅高亮未覆盖部分；2. 实现撤销功能需记录高亮信息并移除对应span；3. 跨标签高亮需遍历节点并分割文本节点；4. 性能优化可通过减少dom操作、使用css和懒加载等方式；5. 兼容不同浏览器可借助polyfill和特性检测。上述策略需综合考虑用户体验与性能平衡。
js实现文字选中高亮，核心在于监听mouseup事件，获取选区（Selection）信息，然后用span标签包裹选中的文字并添加高亮样式。简单来说，就是侦测到用户松开鼠标时，看看有没有文字被选中，有的话就给它穿件“高亮马甲”。
文本高亮的5种实现技巧！
如何优雅地处理多个高亮区域的重叠问题？
假设用户先高亮了“JavaScript很有趣”，然后又高亮了“很有趣的代码”，那么“很有趣”这部分就会出现重叠。一种比较好的处理方式是，每次高亮前，先检查选区内是否已经存在高亮span标签。如果存在，可以采取不同的策略：
-
完全覆盖： 直接移除旧的
span，用新的span覆盖。简单粗暴，但可能不符合用户预期。 - 分割： 将选区分割成多个不重叠的区域，只高亮未高亮的部分。实现起来比较复杂，但用户体验更好。
- 合并： 如果新选区和旧选区相邻或部分重叠，尝试将它们合并成一个更大的高亮区域。需要仔细处理边界情况。
实际操作中，分割可能是更稳妥的选择，它能更灵活地应对各种复杂情况。以下是一个分割高亮区域的思路（伪代码）：
function highlightSelection() {
const selection = window.getSelection();
const range = selection.getRangeAt(0);
// 1. 遍历range内的所有节点
// 2. 如果节点是文本节点，判断是否已经被高亮
// 3. 如果未被高亮，创建新的span并插入
// 4. 如果已经被高亮，分割range，只高亮未高亮的部分
}如何实现撤销高亮功能？
撤销高亮其实就是移除之前添加的span标签。关键在于记录哪些文本被高亮了，以及它们对应的span标签。
-
保存高亮信息： 可以在一个数组中保存每个高亮区域的起始位置、结束位置以及对应的
span标签。 -
监听撤销操作： 添加一个撤销按钮，点击时从数组中找到最后一次高亮的区域，移除对应的
span标签，并更新数组。 -
优化性能： 如果高亮区域很多，撤销操作可能会比较慢。可以考虑使用
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标签等。这种情况的处理比较复杂，需要考虑以下几个方面：
-
获取所有选中的节点： 使用
Range.commonAncestorContainer和Range.startContainer、Range.endContainer获取选区内的所有节点。 - 判断节点类型： 区分文本节点和元素节点，只处理文本节点。
- 分割文本节点： 如果选区只覆盖了文本节点的一部分，需要将文本节点分割成多个部分，只高亮选中的部分。
- 重建DOM结构： 将高亮后的文本节点重新插入到DOM树中，保持原始的DOM结构不变。
处理跨标签高亮的难点在于DOM操作的复杂性。需要仔细处理各种边界情况，确保高亮后的DOM结构仍然有效。可以考虑使用DocumentFragment来优化DOM操作，减少浏览器的重绘和重排。
高亮方案的性能优化有哪些策略？
高亮操作涉及到大量的DOM操作，如果处理不当，可能会导致页面性能下降。以下是一些性能优化策略：
-
减少DOM操作： 尽量避免频繁的DOM操作。可以使用
DocumentFragment来批量更新DOM，减少浏览器的重绘和重排。 -
使用CSS优化： 使用CSS来实现高亮效果，例如
background-color和color属性。避免使用复杂的CSS样式，例如box-shadow和text-shadow，这些样式可能会影响性能。 - 懒加载： 如果页面上有大量文本需要高亮，可以考虑使用懒加载策略。只高亮当前可视区域内的文本，当用户滚动页面时再高亮其他区域的文本。
-
节流和防抖： 对于频繁触发的事件，例如
scroll和resize，可以使用节流和防抖技术来减少事件处理函数的执行次数。 -
避免使用innerHTML： 尽量避免使用
innerHTML来更新DOM，因为它会重新解析整个HTML字符串，导致性能下降。可以使用createElement和appendChild等方法来手动创建DOM节点。
如何兼容不同的浏览器？
不同的浏览器对Selection API的支持程度可能有所不同。为了确保高亮功能在所有浏览器上都能正常工作，需要进行一些兼容性处理：
-
使用polyfill： 可以使用polyfill来弥补不同浏览器之间的差异。例如，可以使用
selection-polyfill来提供统一的SelectionAPI。 -
检测浏览器特性： 可以使用
typeof运算符来检测浏览器是否支持某个API。如果不支持，可以使用备选方案。 -
使用try...catch语句： 可以使用
try...catch语句来捕获可能出现的异常。例如，某些浏览器可能不支持getRangeAt方法。
总的来说，js实现文字选中高亮需要综合考虑用户体验、性能和兼容性。没有一劳永逸的解决方案，需要根据实际情况选择合适的策略。
