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來提供統一的Selection API。
- 檢測瀏覽器特性： 可以使用typeof運算符來檢測瀏覽器是否支持某個API。如果不支持，可以使用備選方案。
- 使用try…catch語句： 可以使用try…catch語句來捕獲可能出現的異常。例如，某些瀏覽器可能不支持getRangeAt方法。
總的來說，js實現文字選中高亮需要綜合考慮用戶體驗、性能和兼容性。沒有一勞永逸的解決方案，需要根據實際情況選擇合適的策略。
