Javascript 替换contenteditable div中的选定文本

我一直在到处寻找答案，但都失败了

是否有跨浏览器解决方案来替换contenteditable div中的选定文本

---

我只想让用户突出显示一些文本，并将突出显示的文本替换为

xxxxx

以下内容将在所有主要浏览器中完成这项工作：

function replaceSelectedText(replacementText) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(document.createTextNode(replacementText));
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.text = replacementText;
    }
}

---

正如我在上发布的一个工作示例所示，您可以使用它来替换ContentEditableDiv中所需的文本

函数粘贴HtmlatCaret（html）{
让我们选择，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//非标准且并非所有浏览器都支持（例如IE9）
const el=document.createElement（“div”）；
el.innerHTML=html；
设frag=document.createDocumentFragment（），
节点，
最后一个节点；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（document.selection&&document.selection.type！=“控制”）{
//IE<9
document.selection.createRange（）.pasteHTML（html）；
}
}
函数addToDiv（事件）{
const emoji=event.target.value；
const chatBox=document.getElementById（“chatBox”）；
chatBox.focus（）；
pasteHtmlAtCaret（`${emoji}`）；
}
函数generateEmojiIcon（表情符号）{
常量输入=document.createElement（“输入”）；
input.type=“按钮”；
input.value=emoji；
input.innerText=emoji；
input.addEventListener（“单击”，addToDiv）；
返回输入；
}
常量emojis=[
{
表情符号：“@DavidJeske:这在Chrome中确实适用于内容可编辑元素，但不适用于输入或文本区域：在非IE浏览器中，此代码特定于常规内容中的选择。@TimDown我正在使用一些类似的
rangy
代码（替换iframe上的文本节点）。使用
sel.setSingleRange（范围）是否正常？”
没有选择
replacementText
吗？这不是OP要求的，只是提醒其他人，
getSelection
在处理表单字段时没有捕获Firefox中选择的文本：此解决方案有一个错误：尝试撤消粘贴的文本。@TimDown是的，如果使用ran修改堆栈，则不处理撤消堆栈因此最好添加如下检查：
if（document.queryCommandSupported（'insertText'）{document.execCommand（'insertText'，false，replacementText）；}否则{range.deleteContents（）；range.insertNode（document.createTextNode（replacementText））；}
为什么单击“粘贴html”后所有文本都变为粗体？粘贴的文本如何只能变为粗体，而其他文本则正常？@SAF如果您可以在
插入的
和
${emoji}中替换标记
b
在js中，你可以随意使用。你可以使用innerText来代替它，只需在代码片段中做一点修改……关于后面的问题，我应该进一步探讨一下。。。