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

我是这样做的：

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 2

如果您的可编辑<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＆lt; 9中不受支持）并使用类似this answer的内容来创建与内容中的字符索引相对应的范围然后使用insertNode()。

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

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

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

3 个答案: