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を組み合わせれば、いけるのだろうか?