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

Question

HTML代码如下所示。

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

我需要在上面的div中特定位置插入一些新文本，基于某个事件。该事件调用函数updateDiv(txt, position)。例如，它可以这样说：

updateDiv("more ",5);

因此，div应该变为：

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

我尝试了很多JavaScript和jQuery，但似乎都不起作用。

- MeetM

---

https://dev59.com/_krSa4cB1Zd3GeqPY8Lb - Roko C. Buljan

@RokoC.Buljan：不，那个问题涉及到文本区域，而不是contenteditable。 - Tim Down

在另一个字符串的位置x插入字符串：https://dev59.com/XW855IYBdhLWcg3wZzbf - RASG

使用DOM变异观察器。谷歌一下。 - vsync

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，采用上面评论中列出的方法，参考这篇文章。非常棒！

- veeTrain

---

但这会移动光标位置。它是一个contenteditable的div。 - MeetM

@MeetM；是的，清除div的html()会移动光标位置。您没有提到需要插入文本的事件是什么。可能您正在尝试绑定键盘事件。但是，如果在某人正在输入时向某个地方插入文本，他们可能不喜欢它。 - veeTrain

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范围的文档（请注意，它们不支持IE＜9），并使用类似于这个答案的方法创建与内容中字符索引相对应的范围，然后使用insertNode()。

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

- Tim Down

---

一个带有换行符的contentEditable div总是会有更多的节点，以<br>的形式存在？如何才能只有一个文本节点呢？ - Rafael

@RafaelDiaz：问题中的代码具有一个带有单个文本节点的contenteditable元素。一般来说，显然，如果应用程序只允许用户编辑一个没有格式的单个文本节点，那么使用contenteditable的应用程序可能不会有太大用处。 - Tim Down

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

- M Rostami