獲取突出顯示的文本而不是突出顯示的文

Question

我正在嘗試創建一個文本編輯器，用戶可以通過突出顯示/選擇它來更改某些文本，然后單擊某個按鈕進行刪除或在其中添加新的字符，以便我需要獲取該特定文本

我試過這個window.getSelection().toString()但我的問題是ifIi有兩個或多個相同單詞的文字，如'dont click here or here' ，用戶突出顯示第二個'here'讓我說不能真的知道用戶突出顯示的這兩個詞中的哪一個

所以我想得到突出顯示的字符串不是通過值或我不知道如何解決這個問題ps我想要創建的文本編輯器類似於這個編輯器我正在寫這個問題

編輯：我的問題不是我想要刪除一些字符串我的問題是我想得到文本而不是文本的值所以當我寫11111111111並突出顯示只有一個1我可以確切地知道哪一個突出顯示

Answer 1

我剛剛使用getSelection()方法進行了測試，您可以使用baseOffset和focusOffset屬性來確定位置。 BaseOffset計算並返回選擇開始的字符數和FocusOffset計數並返回選擇結束的字符數。

這是一個例子：

 function getHighLightText() { let text = window.getSelection().toString(); console.log(text); // log selected text //console.log(window.getSelection()); // log getSelection console.log(window.getSelection().baseOffset + ' - ' + window.getSelection().focusOffset); // log selection start & end offset. } document.onselectionchange = getHighLightText; 

 <p id="p">111111111</p> 

`

注意：未使用大文本進行測試。

Answer 2

您可以使用getRangeAt()獲取所選文本的位置

演示：

 function getSel(el) { console.clear(); var selObj = window.getSelection(); var selection = selObj.toString(); console.log(`Selected: ${selection}`); var selRange = selObj.getRangeAt(0); console.log(`from: ${selRange.startOffset}\\nto: ${selRange.endOffset}`); console.log(el.textContent); el.textContent = `${el.textContent.substr(0, selRange.startOffset)} ***${el.textContent.substr(selRange.endOffset)}`; }; 

 <div onmouseup="getSel(this)">Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>