2010-03-21 11 views
17

मेरे पास एक var है जिसमें एक पूर्ण HTML पृष्ठ है, जिसमें सिर, एचटीएमएल, बॉडी इत्यादि शामिल हैं। जब मैं उस स्ट्रिंग को .html() फ़ंक्शन में पास करता हूं, तो jQuery उन सभी तत्वों, जैसे कि बॉडी, एचटीएमएल, हेड , आदि, जो मैं नहीं चाहता।क्या jQuery .html() का उपयोग करते समय jQuery को कुछ HTML तत्व स्ट्रिंग से स्ट्रिप करता है?

मेरे डेटा वर शामिल हैं:

<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
</body> 
</html> 

तब मेरे jQuery है:

// data is a full html document string 
data = $('<div/>').html(data); 
// jQuery stips my document string! 
alert(data.find('head').html()); 

मैं एक पूर्ण html पृष्ठ स्ट्रिंग हेरफेर करने के लिए, ताकि मैं लौट सकते हैं क्या तत्व में है की आवश्यकता होगी, कर रहा हूँ। मैं इसे jQuery के साथ करना चाहता हूं, लेकिन ऐसा लगता है कि सभी विधियों, संलग्न(), प्रीपेन्ड() और एचटीएमएल() स्ट्रिंग को डोम तत्वों में परिवर्तित करने का प्रयास करते हैं, जो एक पूर्ण HTML पृष्ठ के सभी अन्य हिस्सों को हटाते हैं।

क्या कोई दूसरा तरीका है कि मैं यह कर सकता हूं? मैं एक और विधि का उपयोग कर ठीक हो जाएगा। मेरा अंतिम लक्ष्य मेरी स्ट्रिंग के अंदर कुछ तत्व ढूंढना है, इसलिए मुझे लगा कि jQuery सबसे अच्छा होगा, क्योंकि मुझे इसका बहुत उपयोग किया जाता है। लेकिन, अगर यह मेरी स्ट्रिंग के हिस्सों को ट्रिम और हटाने जा रहा है, तो मुझे दूसरी विधि की तलाश करनी होगी।

विचार?

+1

किसी ने इसे क्यों कम किया? –

+0

कोई मजाक नहीं, मुझे लगता है कि यह ऐसी किसी चीज़ के बारे में अच्छी चर्चा है जिसे कई उपयोगकर्ता आश्चर्यचकित करेंगे। –

उत्तर

12

कुछ त्वरित परीक्षणों के बाद ऐसा लगता है कि यह व्यवहार jQuery के कारण नहीं बल्कि ब्राउज़र द्वारा किया जाता है।

आप आसानी से अपने आप (डेमो http://jsbin.com/ocupa3) सत्यापित कर सकते हैं के रूप में

var data = "<html><head><title>Untitled Document</title></head><body><p>test</p></body></html>"; 
data = $('<div/>').html(data); 
alert(data.html()); 

विभिन्न ब्राउज़रों

में अलग परिणाम प्राप्त होते

ओपेरा 10,10

<HEAD><TITLE>Untitled Document</TITLE></HEAD><P>test</P> 

एफएफ 3,6

<title>Untitled Document</title><p>test</p> 

IE6

<P>test</P> 

तो यह jQuery के साथ कोई संबंध नहीं है, यह जब आप एक पूरे एचटीएमएल स्ट्रिंग एक div अंदर डालने ब्राउज़रों जो कुछ टैग पट्टी है। लेकिन सुनिश्चित करने के लिए आपको html() के लिए पूरे jQuery कोड से कदम उठाने की आवश्यकता होगी। और आपको सभी ब्राउज़रों के लिए ऐसा करने की आवश्यकता होगी क्योंकि कई अलग-अलग तरीके हैं jQuery यह काम करने की कोशिश करता है।


एक समाधान मैं आपको सलाह Iframe का उपयोग करके जांच करने के लिए के लिए (संभवत: छुपी) और html स्ट्रिंग आपके पास करने के लिए कि iframe सामग्री स्थापित करने के लिए। लेकिन ध्यान रखें कि iframes के साथ झुकाव और प्रोग्रामिंग रूप से उनकी सामग्री को बदलना एक आसान काम नहीं है। इसमें विभिन्न ब्राउज़र से जुड़े प्रश्न और समय के मुद्दे भी शामिल हैं।

+0

इसकी जांच के लिए धन्यवाद, मैं इस पर पूरी तरह से सराहना करता हूं। मुझे लगता है कि इसका मेरा समाधान एक रेगेक्स हो सकता है जो एक विशिष्ट तत्व के लिए मेरी स्ट्रिंग को देख सकता है। –

+0

मैं इस सीमा को जानने के लिए आश्चर्यचकित था। यहां एक समाधान है जो काम करता है (हेड बॉडी इत्यादि सहित पूरे एचटीएमएल कोड को सफलतापूर्वक जोड़ता है): mydoc = document.getElementById ('iframe_id')। ContentWindow.document; mydoc.write (html_code); mydoc.close(); –

0

कंटेनर div की कोई आवश्यकता नहीं है।

$('.someClass', foo); // foo is the document you created earlier 

अपडेट::

आप इस ?:

var foo = $(data); // data is your full html document string 

तो फिर तुम इतना है कि यह के अंदर खोज सकते हैं की कोशिश की है

एक और जैसा कि बताया जा उत्तर दिया, यह कैसे होगा कार्य ब्राउज़र पर आता है।

मैं jQuery docs थोड़ा को देखा और इस पाया:

जब HTML, गुण के बिना एक ही टैग से अधिक जटिल है के रूप में यह ऊपर के उदाहरण में है, की वास्तविक निर्माण तत्वों को ब्राउज़र द्वारा innerHTML तंत्र द्वारा नियंत्रित किया जाता है। विशेष रूप से, jQuery एक नया <div> तत्व बनाता है और एचटीएमएल स्निपेट होता है, में पारित किया गया था करने के लिए तत्व की innerHTML संपत्ति सेट।

तो ऐसा लगता है कि जब आप एक स्ट्रिंग के रूप में एक पूरी एचटीएमएल दस्तावेज़ का उपयोग कर रहे , innerHTMLdiv की संपत्ति createElement का उपयोग करने से अलग नहीं है।

+0

'$ ('') कम से कम क्रोम में दर्जनों जेएस त्रुटियों को उठाता है। –

+0

ऐसा लगता है कि काम नहीं करता है। मैंने $ ('हेड', डेटा) .html() को सतर्क करने की कोशिश की लेकिन वह सिर्फ शून्य लौटाता है। –

+0

@ मेरे लिए मैक्स यह कोई त्रुटि नहीं देता है, मुझे बस खाली वस्तु (क्रोम में) मिलती है। यह अजीब बात है, मैंने '$ ('') का परीक्षण किया था, जो ठीक काम करता है। –

2

नहीं, jQuery html फ़ंक्शन केवल तत्व की innerHTML संपत्ति के माध्यम से स्ट्रिंग भेज रहा है, जो ब्राउज़र का एक कार्य है जो HTML को डीओएम तत्वों में पार्स करने और उन्हें पृष्ठ पर जोड़ने के लिए कहता है।

आपका ब्राउज़र HTML डेटा के रूप में किसी पृष्ठ के साथ काम नहीं करता है, यह इसके साथ काम करता है डीओएम और आयात/निर्यात एचटीएमएल।

जावास्क्रिप्ट बहुत अच्छा Regular Expression support है। आपके कार्य की जटिलता के आधार पर, आप पाते हैं कि यह आपके डेटा को संसाधित करने का सबसे अच्छा तरीका है।

3

यहां एक समाधान है, जिसमें शरीर, सिर और अन्य विशेषताओं को शामिल किया जाएगा: mydoc = document.getElementById ('NAME_OF_PREVIEW_FRAME')। ContentWindow.document; mydoc.write (HTML_CODE); mydoc.close();

+0

उद्धारकर्ता, धन्यवाद। – TheNastyOne

संबंधित मुद्दे