如何在特定位置的 contenteditable div 中添加/插入/更新文本？

Question

HTML 代码如下所示

<div id="txtarea" contenteditable="true">Some text</div>

我必须根据上述 div 中特定位置的某些事件插入一些新文本。 该事件调用函数说 updateDiv(txt, positon)。例如它说
updateDiv("more ",5);

所以 div 应该变成了

<div id="txtarea" contenteditable="true">Some more text</div>

我尝试了很多 javascript 和 jquery，但似乎没有任何效果。

Answer 1

如果您的可编辑<div> 的内容始终由单个文本节点组成，这相对简单，您可以使用下面的代码。

var div = document.getElementById("txtarea");
var textNode = div.firstChild;
textNode.data = textNode.data.slice(0, 5) + "more " + textNode.data.slice(5);

否则，您需要阅读有关 DOM Ranges 的信息（请注意，IE this answer 之类的内容创建与内容中的字符索引相对应的范围，然后使用 @987654325 @。

var div = document.getElementById("txtarea");
var range = createRangeFromCharacterIndices(div, 5, 5);
range.insertNode(document.createTextNode("more "));

Answer 2

我是这样做的：

var position = 5,
    txt = "more ";
var current = $("#txtarea").html();
//alert(current.substring(0, position))
var endVal = current.substring(position);
var newValue = current.substring(0, position) + txt + endVal;
$("#txtarea").html(newValue);​

jsfiddle 显示它“正在运行”。

编辑：使用上面评论中列出的方法将jsfiddle 更新为this post。很漂亮！

Answer 3

使用这个功能：

String.prototype.splice = function( position, newstring ) {
    return (this.slice(0,position) + newstring + this.slice(position));
};

并将此功能用作：

var oldstr=$('#txtarea').html();
var newstr='more';
var position = 5;
$('#txtarea').html(oldstr.splice(position , newstr);