उपयोगकर्ता चयन पर कस्टम टैग डालने

Question

मैं चयनित टेक्स्ट के चारों ओर अपने स्वयं के कस्टम टैग और स्क्रिप्ट डालना चाहता हूं। इस

var range = window.getSelection().getRangeAt(0); 
var sel = window.getSelection(); 
range.setStart(sel.anchorNode, sel.anchorOffset); 
range.setEnd(sel.focusNode,sel.focusOffset); 

highlightSpan = document.createElement("abbr"); 
highlightSpan.setAttribute("style","background-color: yellow;"); 
highlightSpan.setAttribute("onmouseout","javascript:HideContentFade(\"deleteHighlight\");"); 
highlightSpan.setAttribute("onmouseover","javascript:ShowHighlighter(\"deleteHighlight\",\""+id_val+"\");"); 
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan); 

की तरह कुछ यह सामान्य स्थितियों में काम करता है लेकिन अगर मैं अलग पैराग्राफ में कुछ पाठ का चयन extractContents एपीआई एचटीएमएल लौटे मान्य है और यह वैध HTML बनाने के लिए अतिरिक्त टैग डाल देंगे। मैं सटीक HTML चाहता हूं जिसे अतिरिक्त जावास्क्रिप्ट द्वारा सत्यापित किए बिना चुना गया था।

क्या ऐसा कोई तरीका है? मैंने How can I highlight the text of the DOM Range object? में उल्लिखित तरीके से इसका प्रयास किया है, लेकिन बात यह है कि मैं उपयोगकर्ता विशिष्ट हाइलाइट्स चाहता हूं ताकि अगर ए ने कुछ हाइलाइट जोड़ा है तो बी इसे देखने में सक्षम नहीं होना चाहिए। इसके लिए मेरे पास बैकएंड कोड तैयार है।

Answer 1

यदि आप टैग के साथ लपेटते हैं तो चयनित पैराग्राफ अलग-अलग अनुच्छेदों से संबंधित है, तो आप अवैध HTML कोड बनाते हैं।

यह अमान्य HTML कोड का एक उदाहरण है जिसे आप उत्पन्न करेंगे।

<p>notselected <span>selected</p><p>selected</span> notselected</p> 

के लिए अपने कार्य को पूरा करने के लिए, आप टैग के साथ चयन इस तरह एक कोड है, जिसके परिणामस्वरूप में से प्रत्येक पैराग्राफ में प्रत्येक पाठ रैप करने के लिए की जरूरत है।

<p>notselected <span>selected</span></p><p><span>selected</span> notselected</p> 

इसे पूरा करने के आपके द्वारा चयनित सभी नोड्स से अधिक पुनरावृति और इस तरह चयनित पाठ रैप करने के लिए है:

function wrapSelection() { 
    var range, start, end, nodes, children; 

    range = window.getSelection().getRangeAt(0); 
    start = range.startContainer; 
    end = range.endContainer; 

    children = function (parent) { 
     var child, nodes; 

     nodes = []; 
     child = parent.firstChild; 

     while (child) { 
      nodes.push(child); 
      nodes = nodes.concat(children(child)); 
      child = child.nextSibling; 
     } 

     return nodes; 
    } 

    nodes = children(range.commonAncestorContainer); 
    nodes = nodes.filter(function (node) { 
     return node.nodeType === Node.TEXT_NODE; 
    }); 
    nodes = nodes.slice(nodes.indexOf(start) + 1, nodes.indexOf(end)); 
    nodes.forEach(function (node) { 
     wrap = window.document.createElement("span"); 
     node.parentNode.insertBefore(wrap, node); 
     wrap.appendChild(node); 
    }); 

    start = new Range(); 
    start.setStart(range.startContainer, range.startOffset); 
    start.setEnd(range.startContainer, range.startContainer.length); 
    start.surroundContents(window.document.createElement("span")); 

    end = new Range(); 
    end.setStart(range.endContainer, 0); 
    end.setEnd(range.endContainer, range.endOffset); 
    end.surroundContents(window.document.createElement("span")); 
}