如何根據插入位置突出顯示文本？

Question

我想要一個按鈕，為當前選定的文本添加一個突出顯示。 我打算用選擇的插入位置來做這件事。 我有以下代碼：

 function getCaretCharacterOffsetWithin(element) { var caretOffset = 0; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") { sel = win.getSelection(); if (sel.rangeCount > 0) { var range = win.getSelection().getRangeAt(0); var preCaretRange = range.cloneRange(); preCaretRange.selectNodeContents(element); preCaretRange.setEnd(range.endContainer, range.endOffset); caretOffset = preCaretRange.toString().length; } } else if ( (sel = doc.selection) && sel.type != "Control") { var textRange = sel.createRange(); var preCaretTextRange = doc.body.createTextRange(); preCaretTextRange.moveToElementText(element); preCaretTextRange.setEndPoint("EndToEnd", textRange); caretOffset = preCaretTextRange.text.length; } return caretOffset; } function showCaretPos() { var el = document.getElementById("test"); var caretPosEl = document.getElementById("caretPos"); caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el); } document.body.onkeyup = showCaretPos; document.body.onmouseup = showCaretPos; 

 Non-editable text. Editable is below: <div id="test" contenteditable="true">Hello, some <b>bold</b> and <i>italic and <b>bold</b></i> text</div> <div id="caretPos"></div> 

上面的代碼找到了插入位置。 我現在如何使用插入位置僅突出顯示文本的位置。

可能的想法從上面獲取插入位置，現在從substr()添加高亮顯示。 str.substr(above caret position) 。

完成此任務的最佳方法是什么？

編輯

我不想改變顏色選擇。 我只想使用插入位置然后添加一個充當熒光筆的div。 例如：

嗨，我叫鮑勃。

現在，我使用插入符號位置來僅跟蹤我的文本選擇的位置。 現在，我將文本替換為原始文本，但也使用div替換文本選擇。

假設我要突出顯示短語名稱 。 我正在使用這種使用插入位置的方法來不突出顯示該短語的每個實例。 只有短語的確切位置。 例如，讓我的文本的短語名稱是兩次，它只會突出顯示與插入符號位置匹配的短語。 然后，用以下內容替換文本： <div id='highlight'> name is </div>

Answer 1

在下面的代碼片段中有2個函數執行相同的操作，除了第一個使用<span>而第二個使用<div> 。 這些功能基本上是......

1. ...刪除所選內容（文字）......
2. ...創建<span>或<div> ...
3. ...將backgroundColor設置為黃色...
4. ...然后將內容附加到<span/div> ...
5. ...然后最后將<span/div>插入range 。

您可以看到<span>可能是更好的選擇。 使用<div>只是簡單的混亂。

SNIPPET

 var spanEdit = document.getElementById('spanEdit'); var divEdit = document.getElementById('divEdit'); function highlightSpan() { var range = document.getSelection().getRangeAt(0); var contents = range.extractContents(); var node = document.createElement('span'); node.style.backgroundColor = "yellow"; node.appendChild(contents); range.insertNode(node); } function highlightDiv() { var range = document.getSelection().getRangeAt(0); var contents = range.extractContents(); var node = document.createElement('div'); node.style.backgroundColor = "yellow"; node.appendChild(contents); range.insertNode(node); } spanEdit.onkeyup = highlightSpan; spanEdit.onmouseup = highlightSpan; divEdit.onkeyup = highlightDiv; divEdit.onmouseup = highlightDiv; 

 <div id='spanEdit' contenteditable="true">Highlight inserted span. This uses extractContents() method.</div> <div>&nbsp;</div> <div id='divEdit' contenteditable="true">Highlight inserted div. This uses extractContents() method.</div> 

這些功能是這篇文章的改編