javascript - 在所选文本之前插入元素

Question

我想在网页上实现这样的功能：调用时，它会检查页面上是否有一些文本选择（通常显示为反色文本），如果是，则<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
    }
});