在所选文本之前插入元素

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);
  }
});

示范