javascriptで選択範囲の文字列を取得

やりたい事は
・選択範囲の文字列を取得
・選択範囲の文字の色を変更
以上2点。

// IEの場合
var txt = document.selection.createRange().text;

// Mozilla系ブラウザ
var txt = window.getSelection().getRangeAt(0).toString();

現在は、このように取得している。
この辺りは、とみぞーノートさんが詳しく説明されている。


しかし、選択範囲の文字の色を変更する場合に、問題がある。
要素をまたぐような範囲を選択すると、ブラウザによって挙動が異なる上に、HTMLの文法的によろしくない。

<span>hoge</span><span>huga</span>

このような文字列を<div>で囲った場合

<span>ho<div>ge</span><span>hu</div>ga</span>

こうなる。理想としては、開始・終了タグを判断して囲みたい。

<span>ho<div>ge</div></span><span><div>hu</div>ga</span>

rangeやnodeを組み合わせれば、いけるのだろうか?