मैं डोम रेंज ऑब्जेक्ट के टेक्स्ट को कैसे हाइलाइट कर सकता हूं?

Question

मैं माउस का उपयोग कर एचटीएमएल पेज (फ़ायरफ़ॉक्स में खोला गया) पर कुछ पाठ का चयन करता हूं, और जावास्क्रिप्ट फ़ंक्शंस का उपयोग करके, मैं चयनित टेक्स्ट से संबंधित रेंजोबजेक्ट बना/प्राप्त करता हूं।

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

अब मैं, सभी पाठ इस तरह यह कर रहा हूँ जो rangeobject.I के अंतर्गत आता है उजागर करने के लिए

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

खैर चाहते हैं, यह काम करता है ठीक, केवल जब rangeobject (startpoint और अंतिम बिंदु) एक ही textnode में निहित है, तो यह इसी text.Ex

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

पर प्रकाश डाला गया लेकिन अगर rangeobject एक से अधिक textnode, तो यह काम नहीं कर रहा properlay को शामिल किया गया, यह केवल ग्रंथों पर प्रकाश डाला गया जो पहले textnode में झूठ, पूर्व

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

किसी भी विचार मैं कैसे कर सकते हैं, सभी ग्रंथों जो rangeobject के अंतर्गत आता है, पर प्रकाश डाला, चाहे श्रेणी एकल नोड या एक से अधिक नोड में निहित स्वतंत्र? धन्यवाद ....

Answer 1

मैं document की या TextRange के execCommand विधि, जो सिर्फ इस तरह के एक उद्देश्य के लिए बनाया गया है, लेकिन आम तौर पर संपादन योग्य दस्तावेजों में प्रयोग किया जाता है का उपयोग कर सुझाव है। यहां एक ऐसा प्रश्न है जो मैंने एक समान प्रश्न को दिया:

निम्नलिखित जो करना चाहते हैं उसे करना चाहिए। गैर-आईई ब्राउज़र में यह डिज़ाइन मोड पर बदल जाता है, पृष्ठभूमि रंग लागू करता है और फिर डिज़ाइन मोड को फिर से बंद करता है।

अद्यतन

आईई 9 में काम करने के लिए फिक्स्ड

अपडेट 12 सितम्बर 2013

यह लिंक है इस विधि के द्वारा बनाई गई प्रकाश डाला दूर करने के लिए एक विधि का ब्यौरा दिया गया है:

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

क्या आप इस कार्यक्षमता की आवश्यकता को विस्तृत कर सकते हैं। ':: चयन'

अधिक जानकारी: http://www.quirksmode.org/css/selection.html https://developer.mozilla.org/en/CSS/::selection

Answer 3

आप आसपास के अवधि के लिए एक वर्ग को जोड़ने के लिए प्रयास करें और लागू कर सकते हैं आप केवल चयनित पाठ आप सीएसएस का उपयोग कर सकते का मुख्य आकर्षण शैली बदलना चाहते हैं पदानुक्रमित सीएसएस?

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

सीएसएस परिभाषा में,

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

मैं इसे कोशिश नहीं की। लेकिन सिर्फ अनुमान लगाया कि यह काम करेगा।

Answer 4

Rangy एक क्रॉस-ब्राउज़र रेंज और चयन लाइब्रेरी है जो इस समस्या को पूरी तरह से CSS Class Applier module के साथ हल करती है।मैं इसका उपयोग डेस्कटॉप ब्राउज़र और आईपैड पर कई प्रकार के हाइलाइटिंग को लागू करने के लिए कर रहा हूं और यह पूरी तरह से काम करता है।

टिम डाउन का जवाब बहुत अच्छा है लेकिन रंगी आपको उस सुविधा पहचान कोड को लिखने और बनाए रखने से बचाता है।