JQuery，如何在html中选中文本后追加div？

嗨可以在选定的文本后添加div吗？与jQuery或Java脚本和四肢修长JSJQuery，如何在html中选中文本后追加div？

我尝试用下面的代码，但没有工作..

function pin_surroundRange() { 
    var range = getFirstRange(); //get selected text via rangy js 
    if(range != null) { 
     $('#content_area ('+range+')').replaceWith(''+range+'<div><input type="text" /></div>');} 
    }

来源

2013-04-25 Wiram Rathod

你试过[append]（http://api.jquery.com/append/）吗？ '$（'#content_area（'+ range +'）'）.append（'

'）;'另外，我想Rangy有办法做到这一点。看看[addRange]（https://code.google.com/p/rangy/wiki/RangySelection#Methods）文档。 – 2013-04-25 13:07:28

当你说它不工作，你在浏览器中得到错误，或者你的输入字段没有添加？ – blackhawk 2013-04-25 13:15:03

hi blachwk我得到这个错误：时间戳：4/25/2013 6:48:02 PM 错误：错误：语法错误，无法识别的表达式:(请求）源文件：http://code.jquery.com /jquery-1.7.2.min.js 行：3 – 2013-04-25 13:19:14

我会使用的步骤是：

获取选中的范围
关闭的范围到底
呼叫范围的insertNode()方法

代码：

var div = document.createElement("div"); 
div.appendChild(document.createElement("input")); 

var sel = rangy.getSelection(); 
if (sel.rangeCount > 0) { 
    var range = sel.getRangeAt(0); 
    range.collapse(false); 
    range.insertNode(div); 
}

来源

2013-04-25 14:04:01

我创建了一个简单的函数，对于文本节点工程。我相信你可以通过一些额外的努力为元素节点获得相同的结果。

http://jsfiddle.net/tarabyte/HTYhm/4/

var addDiv = function() { 
    rangy.init(); //This might be somewhere else 
    var sel = rangy.getSelection(); 
    if(sel && sel.anchorNode && sel.anchorNode.nodeType === 3) { //For text nodes only 
     var node = $(sel.anchorNode), 
      text = node.text(), 
      length = Math.max(sel.focusOffset, sel.anchorOffset); 

     node.replaceWith(text.substring(0, length) 
         + "<div> <input name='edit'/></div>" 
         + text.substring(length)); 
    } 
} 
$("#mark").on("click", addDiv);

来源

2013-04-25 13:31:28

很好，但不适用于跨越多个节点的选择。你不会总是有文字节点吗？毕竟你选择文本。 – zeroflagL 2013-04-25 13:55:40

JQuery，如何在html中选中文本后追加div？

回答

相关问题