在contenteditable div上检测并替换光标前的单词[重复]答案

【问题标题】：Detect and replace the word before cursor on contenteditable div [duplicate]在contenteditable div上检测并替换光标前的单词[重复]
【发布时间】：2018-06-11 17:25:41
【问题描述】：

如何在 contenteditable div 中检测光标前的单词并将其替换为其他内容？ 这个 works for a textarea 但不适用于这个 contenteditable div：

document.getElementById('a').addEventListener('keydown', e => {
  if (e.which == 9) {
    e.preventDefault();
    let endingIndex = e.target.selectionStart;     // does not work for contenteditable
    let startingIndex = endingIndex && endingIndex - 1;
    let value = e.target.innerHTML;
    let regex = /[ ]/;

    while(startingIndex){
      if(regex.test(value[startingIndex])){
        ++startingIndex;
        break;
      }
      --startingIndex;
    }
    console.log('word before cursor: ' + value.substring(startingIndex, endingIndex));
  }
  
});

&lt;div contenteditable id="a"&gt;Please click here and hit TAB, the word before cursor should be replaced by something else.&lt;/div&gt;

【问题讨论】：

标签： javascript html contenteditable

【解决方案1】：

这是因为selectionStart 是一个仅适用于HTMLInputElement 类型的Objsects 的属性。也许你想看看这个gist或者直接使用Range接口。

【讨论】：

【解决方案2】：

使用 AntonGuz 的回答建议的 gist，这适用于可内容编辑的 div 和 textarea：

function getPos(elt) {
    if (elt.isContentEditable) {  // for contenteditable
        elt.focus();
        let _range = document.getSelection().getRangeAt(0);
        let range = _range.cloneRange();
        range.selectNodeContents(elt);
        range.setEnd(_range.endContainer, _range.endOffset)
        return range.toString().length;
    } else {  // for texterea/input element
        return elt.selectionStart;
    }
}

function setPos(elt, pos) {
    if (elt.isContentEditable) {  // for contenteditable
        elt.target.focus();
        document.getSelection().collapse(elt.target, pos);
    } else {  // for texterea/input element
        elt.target.setSelectionRange(pos, pos);
    }
}

function insertText(content) {
    document.execCommand('insertText', false, content) 
}

document.addEventListener("keydown", function(e) {
    if (e.target.tagName.toLowerCase() === 'textarea' || e.target.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            console.log(getPos(e.target));
            
            let endingIndex = getPos(e.target);
            let startingIndex = endingIndex && endingIndex - 1;
            let value = e.target.isContentEditable ? e.target.innerHTML : e.target.value;
            let regex = /[ ]/;

            while (startingIndex) {
                if (regex.test(value[startingIndex])) {
                    ++startingIndex;
                    break;
                }
                --startingIndex;
            }
            console.log('word before cursor: ' + value.substring(startingIndex, endingIndex));
        }
    }
});

<div contenteditable>Please click here and hit TAB, the word before cursor should be replaced by something else.</div>

<textarea></textarea>

【讨论】：