替换contenteditable div中的选定文本

Jud*_*udy 42 javascript contenteditable

我一直在高低寻找答案,但失败了.

是否有跨浏览器解决方案来替换contenteditable div中的选定文本?我只是希望用户突出显示一些文本并将突出显示的文本替换为xxxxx.

Tim*_*own 79

以下内容将在所有主流浏览器中完成:

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 此解决方案有一个错误:尝试撤消粘贴的文本。 (3认同)
  • @TimDown 是的,如果使用范围方法对其进行修改,则不会处理撤消堆栈。所以最好添加一些这样的检查:`if (document.queryCommandSupported('insertText')) { document.execCommand('insertText', false, replacementText); } else { range.deleteContents(); range.insertNode(document.createTextNode(replacementText)); }` (3认同)
  • @DavidJeske:这绝对适用于Chrome中的contenteditable元素,但不适用于输入或textareas:在非IE浏览器中,此代码特定于常规内容中的选择. (2认同)