How can I replace a word that was clicked

Question

Let's imagine they wrote "hello world my friends" and if I chick on the word "my" the text should be "hello world <span> my </span> friends"

then if I click on the word "world" it would be: "hello <span> world </span> my friends"

How can I replace a word that was clicked by wrapping that same word in a span and then putting it in the previously typed text?

my code works correctly the first time, but then it doesn't work just in case the content of the div is dynamic, it is for a chat

 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

Here is an example:

 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>