javascript - 如何在可编辑 div 中替换给定的 "starting index"和 "string to replace"字符串

Question

我正在 contenteditable div 中进行字符串替换。当用户输入 : 时，我将其索引存储在某个变量中。

考虑示例 1:

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

根据上面的示例，起始索引是 34，结束索引必须是靠近空白的索引，即 39，并且替换字符串是 sleeping。
鉴于此，输出必须是快速的棕色狐狸跳过一只熟睡的狗

考虑示例 2:

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

根据上面的例子，起始索引是39，结束索引必须是靠近空白的索引(但在这种情况下，它必须是一个EOL)，替换字符串是猫。
鉴于此，输出必须是the Quick Brown Fox Jumps Over a Lazy Cat

我尝试使用下面的代码，但用户最终会丢失已经对文档部分完成的格式(例如:棕色可能会加粗，跳转可能为斜体)。

$('#editableDiv').text($('#editableDiv').text().replace(searchString, ReplaceString));

我什至尝试过 $('#editableDiv').html($('#editableDiv').html().replace(searchString, ReplaceString)); 但 .html () 将返回带有 html 代码的字符串，因此索引可能会相应变化。

剩下的问题是如何在不丢失给定格式的情况下替换字符串、搜索的起始索引和替换字符串。

编辑
获取 div 内插入符索引的函数

getCaretPosition : function(){
        var element = document.getElementById("editableDiv");
        var caretOffset = 0;
        f (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;
        }
        return caretOffset;
    }

当用户输入 ':' 时，我将调用 getCaretPosition 以捕获其在 div 中的索引。

Answer 1

试试这个:

HTML

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

Javascript

String.prototype.replaceAll = function(search, replace){
    if(!replace) 
        return this;

    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
};


var content = $('#editableDiv').html();
content = content.replaceAll(":dog", "cat");

$('#editableDiv').html(content);

这是一个工作 fiddle :http://jsfiddle.net/SL76e/