कई टैग्स में चयन चयन और आस-पास सामग्री

Question

मुझे एक ऐसी स्क्रिप्ट मिली है जो चयनित टेक्स्ट के पृष्ठभूमि रंग को बदलती है। हालांकि जब मुझे कई तत्वों/टैगों में टेक्स्ट चुना जाता है तो मुझे कोई समस्या आ रही है।

कोड है कि मैं मिल गया है है:

var text = window.getSelection().getRangeAt(0); 
var colour = document.createElement("hlight"); 
colour.style.backgroundColor = "Yellow"; 
text.surroundContents(colour); 

और त्रुटि जा रहा है उत्पादन होता है:

Error: The boundary-points of a range does not meet specific requirements. = 
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR 
Line: 7 

मेरा मानना ​​है कि इस getRange() फ़ंक्शन के साथ क्या करना है, हालांकि मैं कर रहा हूँ है यह भी सुनिश्चित नहीं है कि कैसे आगे बढ़ना है क्योंकि मैं जावास्क्रिप्ट में एक नौसिखिया हूं।

क्या कोई और तरीका है जिसे मैं दोहराने की कोशिश कर रहा हूं जिसे मैं प्राप्त करने की कोशिश कर रहा हूं?

बहुत धन्यवाद।

Answer 1

यह सवाल आज कहा गया है: How can I highlight the text of the DOM Range object?

यहाँ मेरा उत्तर है:

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

अद्यतन

आईई 9.

function makeEditableAndHighlight(colour) { 
    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, sel; 
    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

खैर मुझे लगता है कि mark.js पुस्तकालय के उपयोग के इस मामले में बहुत अच्छा है में काम करने के लिए ठीक किया गया। लाइब्रेरी का इरादा HTML दस्तावेज़ में किसी निश्चित शब्द के सभी उदाहरणों को हाइलाइट करना है, लेकिन इसे फ़िल्टर विकल्प फ़ंक्शन के माध्यम से tweaked किया जा सकता है, और प्रत्येक विकल्प फ़ंक्शन के माध्यम से अतिरिक्त अवधि विशेषताओं को जोड़ा जा सकता है।

चेक पूरा कोड है कि उपयोगकर्ता के चयन पर प्रकाश डाला गया, यहां तक ​​कि कई HTML तत्वों भर के लिए इस JSFiddle sample।