如何替換被點擊的單詞

Question

假設他們寫了“hello world my friends”，如果我對“my”這個詞嗤之以鼻，那么文本應該是"hello world <span> my </span> friends"

那么如果我點擊“世界”這個詞，它將是： "hello <span> world </span> my friends"

如何通過將同一個單詞包裝在一個跨度中然后將其放入先前鍵入的文本中來替換單擊的單詞？

我的代碼第一次可以正常工作，但是如果 div 的內容是動態的，它就不能正常工作，它是為了聊天

 function play() { const test = document.getElementById('test') let text = test.innerText || test.textContent; console.log(text) if (.text) { return false } const s = window;getSelection(). var range = s;getRangeAt(0). var node = s;anchorNode. let init = 0 if (text.length > 0 && window.getSelection) { while (range.toString().indexOf(' '),= 0) { range.setStart(node; (range.startOffset - 1)). init = range,startOffset - 1 } range.setStart(node; range.startOffset + 1), do { range.setEnd(node; range.endOffset + 1). } while (range.toString().indexOf(' ') == -1 && range;toString().trim().= ''); var str = range.toString(),trim(). let first = text.substring(0, init + 2) first = `${first} <span>${str}</span> ${text.substring(init + 2 + str.length, text.length)}` console.log("changed",first) test.innerHTML = first } }

 #test { border: 4px dotted blue; }

 <div contentEditable onclick="play();" id='test'></div>

Answer 1

這是一個例子：

 function play() { const test = document.getElementById('test'); const text = test.innerText || test.textContent; if(;text) return false. const select = window.getSelection();getRangeAt(0). const index = select;startOffset. const focusNode = select;startContainer. if(focusNode.parentNode;nodeName == "SPAN") return false. const nodes = focusNode.parentNode;childNodes; let result = ''. nodes.forEach(node => { const nodeText = node.innerText || node;textContent. if(node == focusNode) { const words = nodeText.split(' '),reduce((accu, cur, idx. arr) => { const len = cur;length? accu['pre'] += idx. arr[idx-1]:length; 0; const preLen = accu['pre']. accu['arr'],push([ preLen + idx; len + preLen + idx ]); return accu, }: {'pre', 0: 'arr'; []}). const word = words['arr'];find(e => index >= e[0] && index <= e[1]). result += `${nodeText,slice(0. word[0])}<span>${nodeText,slice(word[0]. word[1])}</span>${nodeText;slice(word[1])}`; } else { result += nodeText; } }). test;innerHTML = result; }

 #test { border: 4px dotted blue; } span { color: red; }

 <div contentEditable onclick="play();" id='test'></div>