जे एस - surroundContents केवल पाठ पर प्रकाश डाला को बरकरार रखे हुए मुख्य आकर्षण के बारे में 20% का प्रयास

Question

मैं एक mouseup घटना का उपयोग कर रहा एक समारोह जो पाठ पर प्रकाश डाला गया और (ढेर अतिप्रवाह से समारोह) एक अवधि के साथ हाइलाइट किए गए पाठ के चारों ओर गति प्रदान करने के:

function highlightText(e) { 

    var t = window.getSelection().toString(); 
    if (t) { 
     $("#mySpan").remove(); 
     var range = window.getSelection().getRangeAt(0); 
      newNode = document.createElement("span"); 
     newNode.id = 'mySpan'; 

     range.surroundContents(newNode); 

    } 
} 

मुझे जो मुख्य समस्या आ रही है वह यह है कि surroundContents शामिल है, पाठ हाइलाइट प्रयासों के केवल 20% पर प्रकाश डाला गया है (अन्यथा हाइलाइटिंग तुरंत गायब हो जाती है)। मैंने एक सेटटाइमआउट जोड़ने की कोशिश की, 1s के लिए आसन्न सामग्री को कॉल नहीं किया। मैंने निकालने() कथन को हटाने का भी प्रयास किया, लेकिन अभी भी कोई अच्छा नहीं है।

यह क्यों हो रहा है पर कोई विचार?

Answer 1

विफलता का संभावित कारण यह है कि चयनित पाठ केवल शुरुआत या गैर-पाठ नोड के अंत में शामिल होता है, और दोनों नहीं।

This is <em>bold</em> 

:

तो अगर है कि कोड केवल का चयन निम्नलिखित यह असफल हो जायेगी (और एक अपवाद फेंक), क्योंकि यह भी चयन में टैग बंद करने पर कब्जा नहीं करता है में "यह बो है" चलाने के लिए थे

This is <em>bo 

संदर्भ::

तो साथ समाप्त https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents

Answer 2

मैं एंड्रॉयड पर क्रोमियम के साथ एक ही समस्या का सामना करना पड़ रहा था। कुछ विशिष्ट मामलों में, range.surroundContents(newNode) का कॉल पेज रीलोड का बहुत अजीब व्यवहार और इसी तरह का कारण बनता है। the documentation of the function की जाँच के बाद:

इस विधि newNode.appendChild (range.extractContents()) के लिए लगभग बराबर है; range.insertNode (newNode)। आसपास के बाद, की सीमा बिंदुओं में नई नोड शामिल है।

तो स्पष्ट बात पाठ को हाइलाइट करने का एक और तरीका लागू करना था। मुझे mark.js लाइब्रेरी मिली जो वास्तव में वही था जो मैं उस परेशान साइड इफेक्ट के बिना चाहता था। (यहां एक JSFiddle sample है जो दिखाता है कि इसका उपयोग केवल चयन को हाइलाइट करने के लिए कैसे किया जाता है)। अंतर यह है कि लाइब्रेरी range.surroundContents(newNode) और न ही newNode.appendChild बल्कि node.replaceChild का उपयोग नहीं कर रही थी।

उस पर आधारित, मेरे पास होने वाली समस्या का समाधान यहां है और मुझे लगता है कि यह आपके मामले पर भी लागू होता है।

function surroundRangeWithSpan(range) { 
    var span = document.createElement('span'); 

    // The text is within the same node (no other html elements inside of it) 
    if (range.startContainer.isEqualNode(range.endContainer) && range.startContainer.childNodes.length == 0) { 
     // Here you customise your <span> element 
     customSurroundContents(range, span); 
    } else { 
     // Here you have to break the selection down 
    } 
    return span; 
    } 

    function customSurroundContents(range, span) { 
    var node = range.commonAncestorContainer; 
    var startNode = node.splitText(range.startOffset); 
    var ret = startNode.splitText(range.toString().length); 
    span.textContent = startNode.textContent; 
    startNode.parentNode.replaceChild(span, startNode); 
    } 

और आप समारोह में window.getSelection().getRangeAt(0) पास करते हैं।