javascript - 選択したテキストの直前に要素を挿入する

Question

このような関数を Web ページに実装したいと思います: 呼び出されると、ページにテキスト選択 (反転した色のテキストとして表示されることが多い) があるかどうかを確認し、ある場合は、要素<img src="my.png"/>の最初の単語の直前に要素を挿入します。選択。

純粋な JavaScript または jQuery コードはどちらも歓迎されますが、jQuery が望ましいです。ありがとうございました。

Answer 1

この解決策を提案できます：

$('#butt').click(function(){
  var sel = window.getSelection();
  if (sel.toString().length>0) { 
     var key = sel.anchorNode.compareDocumentPosition(sel.focusNode) & Node.DOCUMENT_POSITION_PRECEDING
        ? 'focus' : 'anchor';
     var $elem = $(sel[key+'Node']), txt = $elem.text(), offset = sel[key+'Offset'];
     var $f = $(document.createTextNode(txt.slice(0, offset)));
     $elem.replaceWith($f);
     $(document.createTextNode(txt.slice(offset))).insertAfter($f);
     $('<img src=http://dystroy.org/flore/icon.png>').insertAfter($f);
  }
});

デモンストレーション

Answer 2

    <div id="test">
    <span class="spanthatcontainstext">test</span>
    </div>
$(function(){
    var checkfortext = $('.spanthatcontainstext').length;
    if(checkfortext){
    $(checkfortext).prepend('<img src="" />');
    } else {
    //do something if there is no text
    }
});