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

Question

我有一个富文本编辑器(nicEditor(，它将输入存储在标记中，如下所示：

<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>

以上是我可以访问的状态，但实际呈现的内容如下：

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

我想能够在渲染的文本中选择一些东西(比如innerHTML的第二次出现(，并用其他东西替换它，实现这一点的最佳方式是什么(不使用jQuery(关键思想是替换一个选择，而不仅仅是第一次出现输入。

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"/>