DOM

2012-03-02 17 views
6

के लिए एक जावास्क्रिप्ट पार्सर हमारे पास एक प्रोजेक्ट में एक विशेष आवश्यकता है जहां हमें HTML की एक स्ट्रिंग (AJAX प्रतिक्रिया से) क्लाइंट साइड जावास्क्रिप्ट केवल के माध्यम से पार्स करना होगा। ठीक है PHP या जावा में कोई पार्सिंग नहीं है! मैं पूरे सप्ताह में स्टैक ओवरव्लो के माध्यम से जा रहा हूं और अभी तक स्वीकार्य समाधान नहीं मिला है।DOM

आवश्यकताओं पर कुछ और जानकारी:

  • हम किसी भी पुस्तकालय का उपयोग कर सकते (अधिमानतः dojo और/या jQuery) या देशी जाना!

  • हम एक पूरे HTML दस्तावेज़ हम एक स्ट्रिंग, <head> और <body> सहित प्राप्त होने पार्स करने के लिए की जरूरत है।

  • हमें कभी-कभी तारों के लिए पार्स किए गए डोम संरचनाओं को क्रमबद्ध करने की आवश्यकता होती है।

  • अंत में, हम वर्तमान दस्तावेज़ में पार्स किए गए डॉम को जोड़ना नहीं चाहते हैं। इसके बजाय, हम इसे स्थायी भंडारण के लिए सर्वर पर वापस भेज देंगे।

उदाहरण के लिए:

  1. एक TinyMCE Parser: हम की तरह

    var dom = HTMLtoDOM('<html><head><title> This is the old title. </title></head></html>'); 
        dom.getElementsByTagName('title')[0].innerHTML = "This is a new Title"; 
    
    अपना शोध के साथ

    कुछ चाहिए, ये हमारे विकल्प हैं। मुसीबत? हमें जरूरी एक संपादक को शामिल करने की ज़रूरत है जो मुझे लगता है। HTML को पार्स करने के बारे में कैसे हमें एक संपादक की आवश्यकता नहीं है?

  2. John Resig's Parser। हमारी सर्वश्रेष्ठ शर्त होना चाहिए। दुर्भाग्य से, जब पेज की पूरी सामग्री इसे दी जाती है तो पार्सर क्रैश हो रहा है!

  3. jQuery $ (htmlString) या dojo.toDom (htmlString)। दोनों पर भरोसा करते हैं दस्तावेज़फ्रेगमेंट और इसलिए <head> और <body> पर गठबंधन करें!

संपादित: हम HTML क्रमानुसार करने तो हम रेगुलर एक्सप्रेशन के माध्यम से कुछ कस्टम HTML Commnets को पकड़ सकता है चाहता हूँ। हमें उपयोगकर्ताओं को मेटा टैग, शीर्षक टैग इत्यादि को संपादित करने का अवसर देना है, इसलिए HTML पार्सर।

ओह और मुझे लगता है कि मुझे स्टैक ओवरफ़्लो में हत्या कर दी जाएगी, भले ही मैं संकेत RegExp के माध्यम से एचटीएमएल पर पार्सिंग पर !!!

+0

एक आईएफआरएएम नोड बनाएं और इसे वहां पर सामान दें? –

+0

लेकिन .. मुझे समझ में नहीं आता कि आप सर्वर पर भेजने से पहले पहले से ही धारावाहिक HTML स्ट्रिंग को 'पार्स' क्यों करना चाहते हैं। आपको सर्वर पर वापस इसे पास करने के लिए इसे किसी स्ट्रिंग में वापस फिर से क्रमबद्ध करना होगा, है ना? –

+0

@ जेन्स रोलैंड हम RegExp से कुछ कस्टम HTML टिप्पणियां पकड़ना चाहते हैं इसलिए serialization। हम उपयोगकर्ताओं को शीर्षक टैग, मेटा टैग आदि को संपादित करने की क्षमता देना चाहते हैं इसलिए डीओएम पार्सिंग! –

उत्तर

10

आप वर्तमान दस्तावेज़ का लाभ उठाए बिना किसी भी नोड्स को जोड़ सकते हैं। इस तरह

कोशिश कुछ:

function toNode(html) { 
    var doc = document.createElement('html'); 
    doc.innerHTML = html; 
    return doc; 
} 

var node = toNode('<html><head><title> This is the old title. </title></head></html>'); 

console.log(node);​ 

http://jsfiddle.net/6SvqA/3/

+0

अब _this_ सुरुचिपूर्ण है। +1! लेकिन हमें अभी भी समस्या है कि डीओएम को पार्स करना इंटियल इश्यू के लिए गलत दृष्टिकोण है। हालांकि, इस जवाब की गलती नहीं है। – jwueller

+2

@lusive यह विश्वसनीय उपयोगकर्ताओं के लिए हो सकता है, जैसे फील्ड एजेंट या कुछ, आप कभी नहीं जानते। –

+0

@lusive उपयोगकर्ता बहुत भरोसेमंद हैं! –

1

मैं एक 2-भाग समाधान का सुझाव दूंगा जिससे आप टैग को पढ़ सकें जो jQuery आपके लिए पार्स नहीं करेगा, और फिर शेष को jQuery में पास कर देगा। यदि आप एचटीएमएल डेटा स्ट्रक्चर को पार्स करने के लिए शुद्ध-जावास्क्रिप्ट समाधान की तलाश में हैं, तो jQuery शायद आपकी सबसे अच्छी शर्त है क्योंकि इसमें डेटा में हेरफेर करने के लिए कई अंतर्निहित फ़ंक्शन हैं। आप वास्तव में एक jQuery प्लगइन के रूप में अपनी प्लगइन बना सकते हैं जिसे $ .parser या उस प्रकृति के कुछ के माध्यम से बुलाया जा सकता है। यदि आप डेटा को पार्स करने के लिए अपने स्वयं के फ़ंक्शन के साथ jQuery का विस्तार करते हैं, तो आप एक विस्तारित jQuery ऑब्जेक्ट भी वापस कर सकते हैं जिसमें शीर्षलेख से विशिष्ट डेटा तत्वों को पढ़ने के लिए फ़ंक्शन शामिल हैं क्योंकि आप मैन्युअल रूप से पार्स कर सकते हैं ... जानकारी और उसे उसी ऑब्जेक्ट में स्टोर कर सकते हैं ।

1

के बाद से एचटीएमएल अनिवार्य रूप से एक्सएमएल है आप jQuery का उपयोग कर सकते parseXML

var dom = $.parseXML(html); 

$('title', dom).text("This is a new Title"); 

संपादित करें:

आप इसे एक स्ट्रिंग आप एक्सएमएल प्लगइन का उपयोग करने की आवश्यकता होगी में वापस प्राप्त करना चाहते हैं, लेकिन मैं नहीं मिल सकता है उसके मूल स्रोत तो यहाँ यह है:

/** 
* jQuery xml plugin 
* Converts XML node(s) to string 
* 
* Copyright (c) 2009 Radim Svoboda 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
* @author Radim Svoboda, user Zzzzzz 
* @version 1.0.0 
*/ 


/** 
* Converts XML node(s) to string using web-browser features. 
* Similar to .html() with HTML nodes 
* This method is READ-ONLY. 
* 
* @param all set to TRUE (1,"all",etc.) process all elements, 
* otherwise process content of the first matched element 
* 
* @return string obtained from XML node(s) 
*/   
jQuery.fn.xml = function(all) { 

    //result to return 
    var s = ""; 

    //Anything to process ? 
    if(this.length) 

    //"object" with nodes to convert to string 
    (
     ((typeof all != 'undefined') && all) ? 
     //all the nodes 
     this 
     : 
     //content of the first matched element 
     jQuery(this[0]).contents() 
    ) 
    //convert node(s) to string 
    .each(function(){ 
    s += window.ActiveXObject ?//== IE browser ? 
     //for IE 
     this.xml 
     : 
     //for other browsers 
     (new XMLSerializer()).serializeToString(this) 
     ; 
    }); 


    return s;  

    }; 
+0

क्या यह HTML दस्तावेज़ संरचना को संरक्षित रखेगा? उदाहरण के लिए और टैग? –

+0

'jQuery.parseXML() 'एक्सएमएल के साथ इस्तेमाल नहीं किया गया है? हम यहां एचटीएमएल के बारे में बात कर रहे हैं। वे संगत नहीं हैं। – jwueller

+0

जहां तक ​​मैं हां जानता हूं, लेकिन परीक्षण आपके ऊपर है। मैंने इस तरह के परिदृश्य के लिए इसका उपयोग किया है और अब तक कोई समस्या नहीं थी :) –

0

मैं नहीं जानता कि क्यों किसी को भी इस की जरूरत है चाहिए, लेकिन मेरा सुझाव है तो आप बस एक iframe में अपने स्रोत डंप। ब्राउज़र आपके लिए पार्सिंग कर सकता है। आप परिणाम पर डीओएम प्रश्न भी चला सकते हैं।

+0

हां, मैंने कोशिश की! लेकिन उस बिंदु का संदर्भ लें जहां हमें डीओएम को स्ट्रिंग में वापस क्रमबद्ध करने की आवश्यकता हो सकती है। हम iframe के लिए ऐसा कैसे करते हैं? हम इसे कस्टम सीएमएस के लिए बना रहे हैं जहां संपादन योग्य क्षेत्रों को कस्टम HTML टिप्पणियों के माध्यम से चिह्नित किया जाएगा। –

+0

@ ड्रीम फैक्टरी: [jQuery.fn.html()] (http://api.jquery.com/html) के बारे में क्या? – jwueller

0

आप एक पूर्ण पार्सर कि ब्राउज़र में कुछ मौजूदा बात भरोसा नहीं है अपने दुभाषिया, dom.js में HTML पार्सर bootstrap चाहते हैं शीर्ष पायदान है। इसका पूरा उद्देश्य जावास्क्रिप्ट होस्ट किए गए डीओएम में उपयोग के लिए एचटीएमएल को पार्स करना है, इसलिए इसे डीओएम विनिर्देशों के साथ-साथ जेएस में परिणामों का विश्लेषण करने और परिणामों का उपयोग करने की ज़रूरत है, जबकि बेस जेएस के अलावा मौजूदा उपकरण नहीं मानते हैं। यह node.js या spidermonkey के jsshell या webworkers में भी काम करता है। https://github.com/andreasgal/dom.js

इसमें सीरियलाइजेशन हिस्सा भी है, लेकिन ऐसा करने के लिए आपको केवल पार्सर भाग से अधिक उपयोग करने के लिए प्रतिबद्ध होना होगा। आप स्टैंडअलोन सीरिएलाइज़र पा सकते हैं हालांकि यह किसी भी डीओएम संरचना के साथ काम करता है।

+0

अच्छा एक, लेकिन क्या यह क्लाइंटसाइड है? –