हाइलाइटेड / चयनित पाठ प्राप्त करें

Question

क्या jQuery का उपयोग करके किसी वेबसाइट के पैराग्राफ में हाइलाइट किए गए टेक्स्ट को प्राप्त करना संभव है?

Comments

यहाँ एक काम कर रहे समाधान dipaksblogonline.blogspot.in/2014/11/…

— Dipak

सरल जावास्क्रिप्ट ने मेरे लिए काम किया। document.getSelection ()। anchorNode.data.substr (document.getSelection ()। anchorOffset, document.getSelection ()। फ़ोकसऑफ़सेट-document.getSelection ()। anchorOffset)

— रोहित वर्मा

@ रोहितवर्मा: यह केवल एक पाठ नोड के भीतर सम्‍मिलित चयन के साधारण मामले में काम करने वाला है, जो कि इस मामले में गारंटी नहीं है।

— टिम डाउन

@Dipak आप अपने पोस्ट में जिस ब्लॉग का संदर्भ देते हैं, उससे सामाजिक-साझाकरण की कार्यक्षमता को कैसे दोहराते हैं? केवल चयनित स्ट्रिंग को वापस करने के बजाय, मैं उस चर को एक ट्विटर लिंक में पॉप्युलेट करने की कोशिश कर रहा हूं।

Answer 1

उपयोगकर्ता द्वारा चयनित पाठ प्राप्त करना अपेक्षाकृत सरल है। JQuery को शामिल करने से कोई लाभ होने वाला नहीं है क्योंकि आपको वस्तुओं windowऔर documentवस्तुओं के अलावा कुछ भी नहीं चाहिए ।

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

यदि आप एक ऐसे कार्यान्वयन में रुचि रखते हैं जो चयन <textarea>और पाठ <input>तत्वों के साथ भी व्यवहार करेगा , तो आप निम्नलिखित का उपयोग कर सकते हैं। चूंकि अब यह 2016 है, मैं IE <= 8 समर्थन के लिए आवश्यक कोड को छोड़ रहा हूं, लेकिन मैंने एसओ पर कई स्थानों पर इसके लिए सामान पोस्ट किया है।

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

Comments

अगर {} -fork अच्छा हो तो और क्या है? "नियंत्रण" के बारे में क्या है?

— डैन

@Dan: क्षमा करें, मुझे यह प्रश्न याद नहीं आया (मुझे नहीं लगता है कि SO ने मुझे इसके लिए सचेत किया है)। दूसरी शाखा IE <= 8 (IE 9 कार्यान्वयन window.getSelection()) के लिए है। document.selection.typeजांच परीक्षण कर रहा है कि चयन एक नियंत्रण चयन एक पाठ चयन के बजाय है। IE में, एक नियंत्रण चयन एक संपादन तत्व के अंदर एक चयन होता है जिसमें एक या एक से अधिक तत्व (जैसे कि चित्र और प्रपत्र नियंत्रण) होते हैं और हैंडल का आकार बदल जाता है। यदि आप .createRange()इस तरह के चयन पर कॉल करते हैं, तो आपको एक के ControlRangeबजाय एक मिलता है TextRange, और ControlRangeएस के पास कोई textसंपत्ति नहीं है।

— टिम डाउन

@TimDown यह कहना बहुत पतली बर्फ है कि "jQuery के पास X नहीं है", निश्चित रूप से, सही प्लगइन के साथ, यह कुछ भी कर सकता है जिसे आप जावास्क्रिप्ट के साथ ब्राउज़र में कर सकते हैं। इस मामले में, हमारे पास jquery.selection ( madapaja.github.io/jquery.selection ) है। यह कहना "और न ही होना चाहिए" उतना ही गलत है। मैं यहां इसलिए पहुंचा क्योंकि मैं ठीक इसी की तलाश में था। मेरे पास उपयोग का मामला है, और jQuery सही समाधान है।

— शुभ अंक

@ एसेक्स: मैं आपकी बात को देखना चाहता हूं लेकिन मैं असहमत हूं। एक jQuery प्लगइन एक पुस्तकालय है जिसमें jQuery पर निर्भरता है; यह स्वयं jQuery नहीं है। चयन से निपटने के मामले में, jQuery स्वयं ही कुछ भी नहीं प्रदान करता है (जो कि जैसा है वैसा होना चाहिए क्योंकि चयन हैंडलिंग वह नहीं है जो jQuery के लिए है), इसलिए jQuery का उपयोग करने वाला कोई भी समाधान संयोगवश उपयोग कर रहा है।

— टिम डाउन

@ डेनिस 98: मैं दूरस्थ रूप से नाराज या नाराज नहीं हूं :) इनपुट प्रकारों की जांच इसलिए है क्योंकि यदि आप एक्सेस करने selectionStartया selectionEndकिसी <input>तत्व प्रकार (जैसे "संख्या") में प्रवेश करने की कोशिश करते हैं तो क्रोम में कंसोल में आपको चेतावनी मिलती है। इसका समर्थन करें ( उदाहरण के लिए jsfiddle.net/6zoposby/2 देखें )। मैंने चेक को अस्तित्व के लिए छोड़ दिया selectionStartताकि कोड IE में टूट न जाए <= 8. मैं मानता हूं कि चेक activeElementशायद अब ओवरकिल हो गया है। मैं उपयोग करता हूं sliceक्योंकि यह अधिक शक्तिशाली है (हालांकि यहां उपयोगी नहीं है) और टाइप करने के लिए थोड़ा छोटा है substring।

— टिम डाउन

Answer 2

इस तरह हाइलाइट किया हुआ टेक्स्ट प्राप्त करें:

window.getSelection().toString()

और निश्चित रूप से के लिए एक विशेष उपचार:

document.selection.createRange().htmlText

Comments

IE के लिए = 10 " document.selection समर्थन IE10 में हटा दिया गया था और window.getSelection " के साथ बदल दिया । स्रोत: connect.microsoft.com/IE/feedback/details/795325/…

— user2314737

यह विभिन्न ब्राउज़रों (जैसे फ़ायरफ़ॉक्स) में कई शर्तों के तहत विफल हो जाएगा।

— मकेन

Answer 3

यदि आप क्रोम का उपयोग कर रहे हैं तो यह समाधान काम नहीं करता (अन्य ब्राउज़रों को सत्यापित नहीं कर सकता) और यदि पाठ उसी DOM तत्व में स्थित है:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

Answer 4

का उपयोग करें window.getSelection().toString()।

आप डेवलपर.mozilla.org पर अधिक पढ़ सकते हैं