javascript - 如何用索引替换div中的字符串

Question

有没有办法替换 contenteditable 属性设置为 true 的 div 中的字符串？
例如:

<div id="editableDiv" contenteditable="true">
    the quick brown fox jumps over a lazy dog.
</div>

该函数必须执行以下操作:

Scenario 1: start index : 0, end index : 2 and replace string : *why*  
Result : why quick brown fox jumps over a lazy dog.  

Scenario 2: start index : 10, end index : 14 and replace string : *red*  
Result : the quick red fox jumps over a lazy dog.  

下面是我用来获取字符位置的函数:

function getCaretCharOffset() {
    var element = document.getElementById("editableDiv");
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
    else if (typeof document.selection != "undefined" && document.selection.type != "Control")
    {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    console.log(caretOffset);
    return caretOffset;
}

这是工作 jsFiddle

Answer 1

<p id="demo">Click the button to extract characters from the string.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var str = "Hello world!";
var res = str.substring(1,4);
document.getElementById("demo").innerHTML=res;
}
</script>