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？

回答

相關問題