DOM Range nesnesinin metnini nasıl vurgularım?

Question

Fareyi kullanarak html sayfasında (firefox'ta açılmış) bir metin seçiyorum ve javascript işlevlerini kullanarak, seçilen metne karşılık gelen/oluşturmuş olan eşdüzey oluştur/oluştur.

userSelection =window.getSelection(); 
var rangeObject = getRangeObject(userSelection); 

Şimdi ben,

var span = document.createElement("span"); 
    rangeObject.surroundContents(span); 
    span.style.backgroundColor = "yellow"; 

Kuyusu böyle yapıyorum rangeobject.I altında gelen tüm metni vurgulamak istiyoruz, bu ince, sadece rangeobject (StartPoint ve bitiş noktası) işleri aynı textnode yatıyor, o zaman ilgili text.Ex

<p>In this case,the text selected will be highlighted properly, 
     because the selected text lies under a single textnode</p> 

vurgular Ama rangeobject birden fazla textnode, o zaman çalışmıyor properlay kapsıyorsa, sadece metinleri vurgular hangi İlk textnode içinde rangeobject altına giriyor Ör

<p><h3>In this case</h3>, only the text inside the header(h3) 
    will be highlighted, not any text outside the header</p> 

i yapabilir dair bir fikrin, tüm metinler, yalan aralığı tek bir düğüm veya çoklu düğüm yatıyor olmasından bağımsız olarak, vurgulanan? Teşekkürler ....

Answer 1

Ben document 's veya TextRange' tam da böyle bir amaç için inşa edilmiştir, ama genelde düzenlenebilir belgelerde kullanılan ler execCommand yöntemi kullanarak öneririm. İşte benzer bir soruya verdiğim cevap:

Aşağıdakiler istediğiniz şeyi yapmalıdır. IE olmayan tarayıcılarda designMode'u açar, bir arkaplan rengi uygular ve sonra designMode'u tekrar kapatır.

GÜNCELLEME

IE 9'da çalışmak Sabit

GÜNCELLEME 12 Eylül 2013

İşte bu yöntemle oluşturulan vurgular çıkarılması için bir yöntem ayrıntılı bir bağlantı var:

https://stackoverflow.com/a/8106283/96100

function makeEditableAndHighlight(colour) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
    document.designMode = "on"; 
    if (range) { 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
    // Use HiliteColor since some browsers apply BackColor to the whole block 
    if (!document.execCommand("HiliteColor", false, colour)) { 
     document.execCommand("BackColor", false, colour); 
    } 
    document.designMode = "off"; 
} 

function highlight(colour) { 
    var range; 
    if (window.getSelection) { 
     // IE9 and non-IE 
     try { 
      if (!document.execCommand("BackColor", false, colour)) { 
       makeEditableAndHighlight(colour); 
      } 
     } catch (ex) { 
      makeEditableAndHighlight(colour) 
     } 
    } else if (document.selection && document.selection.createRange) { 
     // IE <= 8 case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
} 

Answer 2

Bu işlevsellik gereksinimini ayrıntılı olarak değerlendirir misiniz? ':: seçim'

Fazla Bilgi: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

çevredeki yayılma için bir sınıf eklemeyi deneyin ve başvurabilir miyim yalnızca CSS kullanabilirsiniz seçilen metnin vurgulamak stilini değiştirmek istiyorsanız hiyerarşik CSS? CSS tanımda

var span = document.createElement("span"); 
span.className="selection"; 
rangeObject.surroundContents(span); 

,

span.selection, span.selection * { 
    background-color : yellow; 
} 

bunu deneyin vermedi. Ama sadece bunun işe yarayacağını tahmin ediyorum.

Answer 4

Rangy, CSS Class Applier module ile bu sorunu mükemmel bir şekilde çözen bir tarayıcılar arası seçim kütüphanesidir.Bir dizi masaüstü tarayıcıda ve iPad'de vurgulamayı uygulamak için kullanıyorum ve mükemmel çalışıyor.

Tim Down'ın yanıtı harika ama Rangy, bu özellik algılama kodunu kendiniz yazmanız ve saklamanız gerekmeden sizi ayırıyor.