contenteditable div内の特定の位置にテキストを追加/挿入/更新する方法は？

Question

HTMLコードは、私が上記のdivの中の特定の位置のいくつかのイベントに基づいて、いくつかの新しいテキストを挿入する必要があり、この

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

のように見えます。 イベントは、関数updateDiv（txt、positon）を呼び出します。例えば、そうDIVができる

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

なるべき
updateDiv("more ",5);

を言う私には、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は 'アクションで' それを表示します。

編集：this postに上記のコメントの方法でjsfiddleを更新しました。かなり滑らか！

Answer 2

編集可能な内容<div>が常に1つのテキストノードで構成されている場合、これは比較的簡単で、以下のコードを使用できます。

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

そうでなければ、（彼らはIE < 9でサポートされていないことに注意してください）についてDOM Rangesを読み、コンテンツ内の文字のインデックスに対応する範囲を作成するために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);