在游标之前替换单词时，在contenteditable中有多行 [英] Replace word before cursor, when multiple lines in contenteditable

问题描述

我想替换 contenteditable div中的光标前的单词（另请参阅）。

以下代码：

1. 完全适用于 contenteditable div



2. 不适用于 contenteditable div：



   
   

   未捕获IndexSizeError：无法在'Range'上执行'setStart'：偏移量71大于节点长度（38 ）。
   




如何修改以下代码在 contenteditable div的第二行按TAB时工作？

  document.addEventListener（keydown，function（e）{var elt = e.target; if（elt.isContentEditable）{if（e.keyCode == 9 ）{e.preventDefault（）; el t.focus（）; range = document.getSelection（）。getRangeAt（0）.cloneRange（）; range.collapse（真）; range.setStart（elt，0）; var words = range.toString（）。trim（）。split（''）; var lastWord = words [words.length  -  1]; if（lastWord）{var wordStart = range.toString（）。lastIndexOf（lastWord）; var wordEnd = wordStart + lastWord.length; range.setStart（elt.firstChild，wordStart）; range.setEnd（elt.firstChild，wordEnd）; range.deleteContents（）; document.execCommand（'insertText'，false，hello \\\
newline）; elt.normalize（）; }}}}）;  

< div contenteditable> Hello ，点击这里，然后按Tab键替换这个WORD< br>同时点击此处并在此ONE之后按TAB< / div>

---

注意：我已经从替换contenteditable中的特定单词，但当contenteditable div中有多行时它不起作用。

解决方案

此作品：

data-console =truedata-babel =false>

< div contenteditable> Hello，按TAB键替换此WORD< br>在此ONE之后按TAB< / div>

$ b

这是完整解决方案，适用于 textarea 和contenteditable div 。

I want to replace the word before cursor in contenteditable div (see also Detect the last written word when typing TAB in a textarea or contenteditable div).

The following code:

1. totally works for the first paragraph of the contenteditable div

2. does not work for the next paragraphs of the contenteditable div:

   Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 71 is larger than the node's length (38).

How should I modify the following code to make it work when pressing TAB in the 2nd line of the contenteditable div?

document.addEventListener("keydown", function(e) {
    var elt = e.target;
    if (elt.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            elt.focus();
            range = document.getSelection().getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(elt, 0);
            var words = range.toString().trim().split(' ');
            var lastWord = words[words.length - 1];
            if (lastWord) {
                var wordStart = range.toString().lastIndexOf(lastWord);
                var wordEnd = wordStart + lastWord.length;
                range.setStart(elt.firstChild, wordStart);
                range.setEnd(elt.firstChild, wordEnd);
                range.deleteContents();
                document.execCommand('insertText', false, "hello\nnewline");
                elt.normalize();
            }
        }
    }
});

<div contenteditable>Hello, click here and press TAB to replace this WORD<br>Also click here and press TAB after this ONE</div>

---

Note: I've already tested the answer from Replace specific word in contenteditable but it doesn't work when there are multiple lines in the contenteditable div.

解决方案

This works:

document.addEventListener("keydown", function(e) {
    var elt = e.target;
    if (elt.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            elt.focus();
            sel = document.getSelection();
            sel.modify("extend", "backward", "word");
            range = sel.getRangeAt(0);
            console.log(range.toString().trim());
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = '<b>test</b> and a <a href="hjkh">link</a>';
            var frag = document.createDocumentFragment(), node;
            while (node = el.firstChild) {
                frag.appendChild(node);
            }
            range.insertNode(frag);
            range.collapse();
        }
    }
});

<div contenteditable>Hello, press TAB to replace this WORD<br>Also press TAB after this ONE</div>

This is a full solution for both textarea and contenteditable div.

这篇关于在游标之前替换单词时，在contenteditable中有多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！