markdownに変換するが、適切なキャレットを（JavaScriptで）設定する方法は？

Question

は私が

<p class="session" contenteditable="true"> 
    Everything contained <b>**within**</b> this div is editable in browsers 
    that support <code>`HTML5`</code>. Go on, give it a try: click it and 
    start typing. 
</p> 

は私が入力中に、適切なHTMLタグを追加したい...、適切な解決策を考え出すことはできません。

もちろん、単純な正規表現の置き換えでは問題ありません。しかし、適切な場所にキャレットを置くのに問題があります。

上記の例では、「試し」という言葉を強調したいとします。 *を最初に入力し、次に左の星*を入力すると、テキストは<i>*try*</i>に変換されますが、キャレットの位置を保持したい（キャレットを左の*の後に設定します）。そして、その逆の場合は、右の*が最後に設定されます。

contained <b>**within**</b> this部分に下線を引いて設定するのがより困難です。 _contained <b>**within**</b> this_は<u>_contained <b>**within**</b> this_</u>になります。だから私たちは同じノードにいません。

私は複雑な解決法を考えることができますが、私はこれらのテキスト変換テクニック（範囲、ウィンドウの選択など）に熟練していないので、それを実行するよく知られた方法があるのだろうかと思います。

Answer 1

は、私が最初のステップとして、私はバックの位置にキャレットを置くしようとした第二段階では、キャレット位置を取得しようとしていFiddle

をチェックしてください。

$('.session').keyup(function(){ 
//alert("happening"); 
var sel = window.getSelection(); 
var offset=sel.anchorOffset; 
// you can change the text in div by uncommeting the line below and replace your text with mathcing regex . 
//$('.session').text($('.session').text().replace('/(\*.\*)+/','<i>$1<i>')); 
setCaret(offset); 
$('.session') 
}); 

function setCaret(offset) { 

    var el = $('.session'); 
    //alert(); 
    var range = document.createRange(); 
    var sel = window.getSelection(); 

    range.setStart(el[0].childNodes[0],offset); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    el.focus(); 
} 

必要に応じて部門のテキストを変更する方法を理解する必要があります。 div内のテキストを置換する際にも、ソリューションが機能するように書式設定を維持します。