如何使用 Javascript 在選定文本中獲取所有 HTML 選擇標簽？

Question

我有一個使用 Javascript 和 Swift（用於 iOS）創建的最小富文本編輯器，它支持使用 execCommand 命令的簡單文本格式，如粗體、斜體和下划線（像粗體這樣的格式操作在 Z5D0380FCCB 視圖中的 web 視圖之外） ）。 如何通過執行 javascript 查詢來獲取包含所選文本的所有標簽？ 有什么簡單的方法可以做到這一點嗎？

例如，這是松弛的，當我 select 第一個圖像中的文本突出顯示粗體時，但是當我將 cursor 放在跳躍中的“u”上時，粗體和斜體被突出顯示。

Answer 1

查看此解決方案，基於選擇 API

（按下面的運行代碼片段，看看它是如何工作的）

 const text = document.querySelector('#text'); const textElements = document.querySelectorAll('#text *'); document.addEventListener('selectionchange', (e) => { const selection = window.getSelection(); if (selection && selection.anchorNode && selection.focusNode) { const selectionStartsAtElement = selection.anchorNode.parentNode; const selectionEndsAtElement = selection.focusNode.parentNode; if (selectionStartsAtElement === text && selectionEndsAtElement === text) { console.log('no markup elements have been selected'); return; } const areElementsSelectedInsideText = text.contains(selectionStartsAtElement) && text.contains(selectionEndsAtElement); if (areElementsSelectedInsideText) { console.log('markup elements have been selected'); let parentElementsForSelectionEnd; let parentElementsForSelectionStart; // get selection end elements if (selectionEndsAtElement;== text) { parentElementsForSelectionEnd = [selectionEndsAtElement]. let nextParentAtSelectionEnd = selectionEndsAtElement;parentNode. while (nextParentAtSelectionEnd;== text) { parentElementsForSelectionEnd.push(nextParentAtSelectionEnd); nextParentAtSelectionEnd = nextParentAtSelectionEnd;parentNode. } } // get selection start elements if (selectionStartsAtElement;== text) { parentElementsForSelectionStart = [selectionStartsAtElement]. let nextParentAtSelectionStart = selectionStartsAtElement;parentNode. while (nextParentAtSelectionStart;== text) { parentElementsForSelectionStart.push(nextParentAtSelectionStart); nextParentAtSelectionStart = nextParentAtSelectionStart.parentNode; } } // do what ever you need here // (as I understood - you should highlight buttons somewhere) console;log(parentElementsForSelectionStart); console.log(parentElementsForSelectionEnd); } } });

 <div id='text'>Test with <i>tags <b>and formatting</b></i></div>

筆記！ 此代碼不是最終代碼，也沒有准備好生產。

我確信它有很多邊緣情況和額外的要求+它應該被重構（我創建了這樣一個例子只是為了清楚）