在 HTML/富文本输入区域中查找和替换选定的文本

Question

I have a rich text editor (nicEditor) that stores input in a markup like so:

<div
    style="
        color: #bababa;
        background-color: #0c0a08;
        font-family: Menlo, Monaco, 'Courier New', monospace;
        font-weight: normal;
        font-size: 15px;
        line-height: 23px;
        white-space: pre;
    "
>
    <div>
        <span style="color: #bababa"> selectionRange</span
        ><span style="color: #9d8262">.</span
        ><span style="color: #bababa">range</span
        ><span style="color: #9d8262">.</span
        ><span style="color: #bababa">endContainer</span
        ><span style="color: #9d8262">.</span
        ><span style="color: #bababa">innerHTML</span
        ><span style="color: #9d8262"> =</span
        ><span style="color: #bababa"> newParent</span
        ><span style="color: #9d8262">.</span
        ><span style="color: #bababa">innerHTML;</span>
    </div>
</div>

the above is the state i can access, but the actual content rendered is as follows:

selectionRange.range.endContainer.innerHTML = newParent.innerHTML;

i want to be able to select something in the rendered text (say, the second occurance of innerHTML ) and replace it with something else, what could be the optimal way of achieving this (without using jQuery)? the key idea is replacing a selection and not just the first occurance of the input .

Answer 1

 foo=function() { var selection= window.getSelection().getRangeAt(0); var selectedText = selection.extractContents(); var span= document.createElement("span"); span.innerHTML = `{{C1::${selectedText.textContent}}}` selection.deleteContents(); selection.insertNode(span); }

 <div style=" color: #bababa; background-color: #0c0a08; font-family: Menlo, Monaco, 'Courier New', monospace; font-weight: normal; font-size: 15px; line-height: 23px; white-space: pre; " > <div> <span style="color: #bababa"> selectionRange</span ><span style="color: #9d8262">.</span ><span style="color: #bababa">range</span ><span style="color: #9d8262">.</span ><span style="color: #bababa">endContainer</span ><span style="color: #9d8262">.</span ><span style="color: #bababa">innerHTML</span ><span style="color: #9d8262"> =</span ><span style="color: #bababa"> newParent</span ><span style="color: #9d8262">.</span ><span style="color: #bababa">innerHTML;</span> </div> </div> <input type="button" onclick="foo();" value="FOO"/>