javascript - JQuery，如何在html中选择文本后附加div？

Question

嗨，可以在选定文本后添加 div 吗？使用 jQuery 或 java-script 和 rangy js

我正在尝试使用以下代码但无法正常工作..

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

Answer 1

我会使用的步骤是：

• 获取所选范围
• 将范围折叠到最后
• 调用范围的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);
}

Answer 2

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

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