jquery - हाउ तो वोट#इंडिया २०१९




Jquery का उपयोग करके html स्ट्रिंग की पार्सिंग (7)

मैं data1, data2, data3 पाने के लिए jQuery के माध्यम से इस html को पार्स करने की कोशिश कर रहा हूं। जबकि मुझे data2 और data3 मिलता है, मैं अपने दृष्टिकोण के साथ data3 प्राप्त करने में असमर्थ हूं। मैं jQuery के लिए काफी नया हूं इसलिए कृपया मेरी अज्ञानता को क्षमा करें।

<html>
<body>
   <div class="class0">
    <h4>data1</h4>
    <p class="class1">data2</p>
    <div id="mydivid"><p>data3</p></div>    
   </div>
</body>
</html>

यहाँ मैं इसे कैसे अपने jquery में बुला रहा हूँ।

var datahtml = "<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>";

alert($(datahtml).find(".class0").text()); // Doesn't Work

alert($(datahtml).find(".class1").text()); // work 

alert($(datahtml).find("#mydivid").text()); // work

केवल alert($(datahtml).find(".class0").text()); काम नहीं कर रहा है बाकी उम्मीद के मुताबिक काम कर रहे हैं। मुझे आश्चर्य है कि यह हो सकता है क्योंकि class0 में इसके अंदर कई टैग हैं या क्या ?? ऐसे परिदृश्य में data1 कैसे प्राप्त करें?

https://code.i-harness.com


इसका व्यवहार अजीब है क्योंकि यह html और बॉडी टैग को igonores करता है और पहली कक्षा से कक्षा = "class0" से शुरू होता है। Html को DOM तत्वों के रूप में पार्स किया गया है लेकिन DOM में जोड़ा नहीं गया है। DOM में जोड़े गए तत्वों के लिए चयनकर्ता बॉडी टैग को अनदेखा नहीं करता है और चयनकर्ताओं को दस्तावेज़ पर लागू करता है। आपको नीचे दिए गए अनुसार html को DOM में जोड़ना होगा।

लाइव डेमो

$('#div1').append($(datahtml)); //Add in DOM before applying jquery methods.

alert($('#div1').find(".class0").text()); // Now it Works too

alert($('#div1').find(".class1").text()); // work   

alert($('#div1').find("#mydivid").text()); // work

यदि हम आपके html को कुछ html एलिमेंट के भीतर लपेटते हैं, ताकि क्लास = "class0" के साथ आपके पहले div के बजाय इसे शुरुआती बिंदु बनाया जा सके, तो आपका चयनकर्ता अपेक्षा के अनुरूप काम करेगा।

लाइव डेमो

var datahtml = "<html><body><div><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></div></body></html>";

alert($(datahtml).find(".class0").text()); // Now it Works too

alert($(datahtml).find(".class1").text()); // work   

alert($(datahtml).find("#mydivid").text()); // work

JQuery के पार्सिंग फंक्शन के बारे में jQuery डॉक्स क्या कहते हैं jQuery () यानी $ ()

जटिल एचटीएमएल में पास होने पर, कुछ ब्राउज़र एक डोम उत्पन्न नहीं कर सकते हैं जो वास्तव में प्रदान किए गए HTML स्रोत की नकल करता है। जैसा कि उल्लेख किया गया है, jQuery पास किए गए HTML को पार्स करने और इसे वर्तमान दस्तावेज़ में सम्मिलित करने के लिए ब्राउज़र की .innerHTML संपत्ति का उपयोग करता है। इस प्रक्रिया के दौरान, कुछ ब्राउज़र कुछ तत्वों को फ़िल्टर करते हैं जैसे कि <html> , <title> , या <head> तत्व। नतीजतन, सम्मिलित तत्व मूल स्ट्रिंग के प्रतिनिधि नहीं हो सकते हैं।


इसे इस्तेमाल करे

alert($(datahtml).find(".class0 h4").text());

आपके द्वारा संदर्भित पाठ होने का कारण class0 h4 तत्व के अंदर है .. इसलिए आपका चयनकर्ता काम नहीं करेगा, या सामग्री को एक्सेस नहीं करेगा ..

alert($(".class0 h4").text()); 

alert($(".class1").text()); 

alert($("#mydivid").text()); 

संपादित करें

var datahtml = "<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>";

$('body').html(datahtml);

   alert($(".class0 h4").text()); 

    alert($(".class1").text()); 

    alert($("#mydivid").text()); 

चेक डेमो


मुझे अस्थायी अदृश्य कंटेनर में HTML रखने के अलावा कोई अन्य तरीका नहीं पता है।

$(document).ready(function(){
  var datahtml = $("<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>".replace("\\", ""));
  var tempContainer = $('<div style="display:none;">'+ datahtml +'</div>');
  $('body').append(tempContainer);
  alert($(tempContainer).find('.class1').text());
  $(tempContainer).remove();                                                                                                                                                        
});

यहाँ एक jsfiddle डेमो है


मुझे लगता है कि मुख्य समस्या यह है कि आपके पास jquery का html नहीं हो सकता है। आपके मामले में जेक्वेरी का क्या होता है, यह पहला html टैग खोजने की कोशिश करता है, कि आपके मामले में class0 के साथ div है।

यह देखने के लिए परीक्षण करें कि मैं सही हूं:

if($(datahtml).hasClass('class0'))
    alert('Yes you are right :-)');

तो इसका मतलब है कि आप एक क्वेरी के भीतर html और या बॉडी टैग को एक हिस्से के रूप में नहीं जोड़ सकते।

यदि आप इसे काम करना चाहते हैं तो कोड के इस भाग को जोड़ने का प्रयास करें:

<div>
    <div class="class0">
        <h4>data1</h4>
        <p class="class1">data2</p>
        <div id="mydivid"><p>data3</p></div>    
   </div>
</div>

तो यह प्रयास करें:

var datahtml = "<div><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></div>";

alert($(datahtml).find(".class0").text()); // work

alert($(datahtml).find(".class1").text()); // work 

alert($(datahtml).find("#mydivid").text()); // work

मुझे लगता है कि मेरे पास और भी बेहतर तरीका है:

मान लीजिए कि आपने अपना HTML प्राप्त कर लिया है:

var htmlText = '<html><body><div class="class0"><h4>data1</h4><p class="class1">data2</p><div id="mydivid"><p>data3</p></div></div></body></html>'

यहां वह चीज है जो आप करने की उम्मीद कर रहे हैं:

var dataHtml = $($.parseXML(htmlText)).children('html');

dataHtml अब ठीक वैसे ही काम करता है जैसे कि आप जिस साधारण dataHtml ऑब्जेक्ट से परिचित हैं !!

इस समाधान के बारे में आश्चर्यजनक बात यह है कि यह शरीर, सिर, या स्क्रिप्ट टैग नहीं छीनेगा!


यह काम नहीं करता है क्योंकि क्लास क्लास class0 साथ <div> में सीधे बच्चों के रूप में कोई टेक्स्ट नोड नहीं है। वर्ग को <h4> और यह काम करेगा


वर्तमान उत्तरों में से कोई भी वास्तविक मुद्दे को संबोधित नहीं करता है, इसलिए मैं इसे जारी रखूंगा।

var datahtml = "<html><body><div class=\"class0\"><h4>data1</h4><p class=\"class1\">data2</p><div id=\"mydivid\"><p>data3</p></div></div></body></html>";

console.log($(datahtml));

$(datahtml) एक jQuery ऑब्जेक्ट है जिसमें केवल div.class0 तत्व होता है, इस प्रकार जब आप इसे .find कहते हैं, तो आप वास्तव में संपूर्ण HTML दस्तावेज़ के बजाय div.class0 वंशज की div.class0 होते हैं जिसकी आप अपेक्षा करते हैं।

एक त्वरित समाधान एक तत्व में पार्स डेटा को लपेटने के लिए है।

var parsed = $('<div/>').append(datahtml);
console.log(parsed.find(".class0").text());

Fiddle

इसका कारण बहुत आसान नहीं है, लेकिन मुझे लगता है कि जैसे ही jQuery अधिक जटिल HTML स्ट्रिंग्स के "पार्सिंग" करता है, बस अपने HTML स्ट्रिंग को एक अलग बनाए गए-ऑन-द-फ्लाई डोम टुकड़े में गिरा देता है और फिर पार्स तत्वों को पुनः प्राप्त करता है। इस ऑपरेशन से सबसे ज्यादा संभावना है कि DOM पार्सर html और body टैग को अनदेखा करेगा क्योंकि वे इस मामले में अवैध होंगे।

यहां एक बहुत छोटा परीक्षण सूट है जो दर्शाता है कि यह व्यवहार jQuery 1.8.2 के माध्यम से 1.6.4 तक नीचे है।

संपादित करें: इस post उद्धृत करना:

समस्या यह है कि jQuery एक DIV बनाता है और innerHTML सेट करता है और फिर DIV बच्चों को लेता है, लेकिन चूंकि BODY और HEAD तत्व DIV childs मान्य नहीं हैं, तो वे ब्राउज़र द्वारा नहीं बनाए जाते हैं।

मुझे और अधिक आश्वस्त करता है कि मेरा सिद्धांत सही है। मैं इसे यहाँ साझा करूँगा, उम्मीद है कि यह आपके लिए कुछ मायने रखता है। इस के साथ jQuery के 1.8.2 के असम्पीडित स्रोत को साथ रखें। # लाइन संख्या इंगित करता है।

jQuery.buildFragment (परिभाषित @ # 6122) के माध्यम से किए गए सभी दस्तावेज़ टुकड़े jQuery.clean (# 6151) के माध्यम से जाएंगे (भले ही यह कैश्ड टुकड़ा हो, यह पहले से ही jQuery.clean माध्यम से चला गया था जब यह बनाया गया था), और के रूप में उपरोक्त पाठ का अर्थ है, jQuery.clean (परिभाषित @ # 6275) पार्स किए गए डेटा के लिए कंटेनर के रूप में सेवा करने के लिए सुरक्षित टुकड़े के अंदर एक ताजा div बनाता है - # 6301-6303 पर बनाया गया दिव्य तत्व, # 6344, # पर हटाए गए चाइल्डकोड्स सफाई के लिए 6347 (बग फिक्स के रूप में प्लस # 6359-6361), चाइल्डकोड # 6351-6355 पर रिटर्न एरे में विलय हो गया और # 6406 पर वापस आ गया।

इसलिए, सभी विधियाँ जो jQuery.buildFragment आमंत्रित करती हैं, जिसमें jQuery.parseHTML और jQuery.parseHTML शामिल हैं - उनमें से .append() , .append() , .append() .before() जो domManip jQuery ऑब्जेक्ट विधि और $(html) आह्वान करती हैं। $(html) जिसे jQuery.fn.init पर परिभाषित किया गया है (परिभाषित @ # 97, जटिल [एक सिंगल टैग से अधिक] html स्ट्रिंग @ 125 को jQuery.parseHTML , jQuery.parseHTML @ # 131 को आमंत्रित करता है)।

यह समझ में आता है कि लगभग सभी jQuery HTML स्ट्रिंग्स पार्सिंग (सिंगल टैग html स्ट्रिंग्स के अलावा) कंटेनर के रूप में एक div एलिमेंट का उपयोग करके की जाती है, और html / body टैग्स div एलिमेंट के वैध वंशज नहीं होते हैं, इसलिए उन्हें हटा दिया जाता है।

परिशिष्ट: jQuery के नए संस्करणों (1.9+) ने HTML पार्सिंग लॉजिक (उदाहरण के लिए, आंतरिक jQuery.clean विधि अब मौजूद नहीं है) को फिर से सक्रिय कर दिया है, लेकिन समग्र पार्सिंग तर्क समान है।





jquery