javascript seçimi tüm tarayıcılar değiştir

Question

Geçerli belgenin seçimini bir miktar html ile değiştirmek için kullanabileceğim basit bir js işlevi var mı? Örneğin, belgenin bir yerde <p>AHAHAHA</p> olduğunu ve kullanıcının 1. "ha" metin yığınını seçtiğini varsayalım.

Şimdi böyle bir şey ile değiştirmek istiyorum: <span><font color="red">hoho</font></span>

ben * javascript yerine google zaman seçim * ben basit basit bir cevap alamayan!

Answer 1

Evet. Aşağıdaki açıklamalarda istendiği gibi (bu bölüm IE < için = 8 uygulanmadı rağmen) sonradan eklenen içeriği seçmek için bir seçenek, tüm önemli tarayıcılarda yapacak:

Canlı tanıtım: http://jsfiddle.net/bXsWQ/147/

Kod:

function replaceSelection(html, selectInserted) { 
    var sel, range, fragment; 

    if (typeof window.getSelection != "undefined") { 
     // IE 9 and other non-IE browsers 
     sel = window.getSelection(); 

     // Test that the Selection object contains at least one Range 
     if (sel.getRangeAt && sel.rangeCount) { 
      // Get the first Range (only Firefox supports more than one) 
      range = window.getSelection().getRangeAt(0); 
      range.deleteContents(); 

      // Create a DocumentFragment to insert and populate it with HTML 
      // Need to test for the existence of range.createContextualFragment 
      // because it's non-standard and IE 9 does not support it 
      if (range.createContextualFragment) { 
       fragment = range.createContextualFragment(html); 
      } else { 
       // In IE 9 we need to use innerHTML of a temporary element 
       var div = document.createElement("div"), child; 
       div.innerHTML = html; 
       fragment = document.createDocumentFragment(); 
       while ((child = div.firstChild)) { 
        fragment.appendChild(child); 
       } 
      } 
      var firstInsertedNode = fragment.firstChild; 
      var lastInsertedNode = fragment.lastChild; 
      range.insertNode(fragment); 
      if (selectInserted) { 
       if (firstInsertedNode) { 
        range.setStartBefore(firstInsertedNode); 
        range.setEndAfter(lastInsertedNode); 
       } 
       sel.removeAllRanges(); 
       sel.addRange(range); 
      } 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     // IE 8 and below 
     range = document.selection.createRange(); 
     range.pasteHTML(html); 
    } 
} 

Örnek:

replaceSelection('<span><font color="red">hoho</font></span>', true); 

Answer 2

Sen rangy kütüphanesini kullanabilirsiniz http://code.google.com/p/rangy/

Ardından

var sel = rangy.getSelection(); 
var range = sel.getRangeAt(0); 

range.deleteContents(); 
var node = range.createContextualFragment('<span><font color="red">hoho</font></span>'); 
range.insertNode(node);