Question

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

考虑示例1：

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

根据上面的例子，起始索引是34，结束索引必须是白色空间附近的索引，即39，替换字符串是 sleep 。鉴于此，输出必须快速的棕色狐狸跳过睡觉的狗

考虑示例2：

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

根据上面的例子，起始索引是39，结束索引必须是白色空间附近的索引（但在这种情况下，它必须是 EOL ）并且替换字符串是猫。
鉴于此，输出必须快速棕色狐狸跳过懒猫

我尝试使用下面的代码，但是用户最终会丢失他/她已经对文档部分执行的格式（例如：棕色可能会加粗，跳转可能用斜体字表示。

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

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

问题仍然存在，如何在不丢失格式的情况下替换字符串，开始索引进行搜索，替换字符串。

修改
在div中获得Caret Index的功能

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);

这是一个工作小提琴：http://jsfiddle.net/SL76e/

如何在可编辑的div中替换字符串给出其“起始索引”和“要替换的字符串”

1 个答案: