जावास्क्रिप्ट या jQuery में HTML को सामान्य कैसे करें?


84

टैग में कई गुण हो सकते हैं। कोड में विशेषताएँ जिस क्रम में प्रकट होती हैं, वह मायने नहीं रखती है। उदाहरण के लिए:

<a href="#" title="#">
<a title="#" href="#">

मैं जावास्क्रिप्ट में HTML को कैसे "सामान्य" कर सकता हूं, इसलिए विशेषताओं का क्रम हमेशा समान होता है? मुझे परवाह नहीं है कि कौन सा आदेश चुना जाता है, जब तक कि यह हमेशा एक ही हो।

अद्यतन : मेरा मूल लक्ष्य थोड़ा अंतर के साथ (जावास्क्रिप्ट में) 2 HTML पृष्ठों को अलग करना आसान बनाना था। क्योंकि उपयोगकर्ता कोड को संपादित करने के लिए विभिन्न सॉफ्टवेयर का उपयोग कर सकते हैं, इसलिए विशेषताओं का क्रम बदल सकता है। यह अंतर को बहुत क्रियात्मक बनाता है।

उत्तर : अच्छा, पहले सभी उत्तरों के लिए धन्यवाद। और हाँ, यह संभव है। यहां बताया गया है कि मैं इसे कैसे कर पाया। यह अवधारणा का प्रमाण है, इसे निश्चित रूप से अनुकूलित किया जा सकता है:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
}

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

    list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

    for(var i = 0; i < list.length; i++) {
      this.setAttribute(list[i].name, list[i].value);
    }
  }
});

अंतर के दूसरे तत्व के लिए एक ही बात $('#different')। अब $('#original').html()और $('#different').html()उसी क्रम में विशेषताओं के साथ HTML कोड दिखाएं।


59
इसके लिए क्या आवश्यक है?
रहुल

40
@ वरुण: वास्तव में इसके लिए एक बहुत ही दिलचस्प आवश्यकता है: यह आपके पृष्ठों के गज़िप संपीड़न को बेहतर कर सकता है।
०२०

11
आह, जावास्क्रिप्ट में ... संपीड़न के लिए बहुत कुछ। पता नहीं फिर क्या जरूरत है।
हेयरम ऑक्ट

13
@ जूलियन: जब तक आपका जावास्क्रिप्ट कोड चलता है, तब तक पेज क्लाइंट को भेजा जा चुका होता है। मैं यह नहीं देख सकता कि यह कैसे संपीड़न में मदद कर सकता है।
कैसाब्लांका

22
वहाँ वास्तव में ओपी पूछता है कि क्या करने की कोशिश करने के लिए एक वैध उपयोग है। विकी ड्राइव करने के लिए एक WYSIWYG संपादक का उपयोग करना। जिस प्रोजेक्ट पर मैं काम कर रहा हूं, वह ठीक यही करता है, और संपादक हर बार आपके द्वारा विकी को संपादित करने के लिए विशेषताओं के क्रम को उलट देगा, जिसके परिणामस्वरूप अनावश्यक अंतर होता है। मैं भिन्नता से बचने के लिए बैकएंड पर प्रस्तुत HTML में वर्णानुक्रम में छंटनी की विशेषताओं को समाप्त करता हूं; प्रस्तुत करने से पहले जावास्क्रिप्ट में उस तरह का आसानी से किया जा सकता है।
फ्रैंक किसान

जवाबों:


68

जावास्क्रिप्ट वास्तव में एक वेब पेज को टेक्स्ट-आधारित HTML के रूप में नहीं देखता है, बल्कि एक ट्री संरचना के रूप में जाना जाता है जिसे DOM, या डॉक्यूमेंट ऑब्जेक्ट मॉडल के रूप में जाना जाता है। DOM में HTML एलिमेंट विशेषताओं का क्रम परिभाषित नहीं है (वास्तव में, Svend टिप्पणियों के रूप में, वे DOM का हिस्सा भी नहीं हैं), इसलिए उन्हें उस बिंदु पर क्रमबद्ध करने का विचार है जहाँ जावास्क्रिप्ट रन अप्रासंगिक है।

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

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


8
जावास्क्रिप्ट सर्वर-साइड चला सकते हैं।
मैट कांटोर

विशेषताओं को दस्तावेज़ ट्री का हिस्सा नहीं माना जाता है (जो स्वाभाविक रूप से ऑर्डरिंग का उपयोग करता है)। तो जब Attr नोड इंटरफ़ेस को इनहेरिट करता है, तो DOM Core 2 इन फ़ील्ड्स को w3.org/TR/DOM-Level-2-Core/core.html#ID-637646024 पर प्रदर्शित करता है
Svend

35

HTML लें और DOM स्ट्रक्चर में पार्स करें। फिर DOM स्ट्रक्चर लें, और उसे वापस HTML में लिखें। लिखते समय, किसी भी स्थिर प्रकार का उपयोग करके विशेषताओं को क्रमबद्ध करें। आपका HTML अब विशेषताओं के संबंध में सामान्यीकृत हो जाएगा।

यह चीजों को सामान्य करने का एक सामान्य तरीका है। (गैर-सामान्यीकृत डेटा पार्स करें, फिर इसे सामान्यीकृत रूप में वापस लिखें)।

मुझे यकीन नहीं है कि आप HTML को सामान्य क्यों करना चाहते हैं, लेकिन वहां आपके पास है। डेटा डेटा है। ;-)


1
क्या आपके पास एक कोड उदाहरण है। मैंने कुछ ऐसा ही करने की कोशिश की, यह काम नहीं किया।
जुलिएन

12

यह अवधारणा का प्रमाण है, इसे निश्चित रूप से अनुकूलित किया जा सकता है:

function sort_attributes(a, b) {
  if( a.name == b.name) {
    return 0;
  }

  return (a.name < b.name) ? -1 : 1;
 }

$("#original").find('*').each(function() {
  if (this.attributes.length > 1) {
    var attributes = this.attributes;
    var list = [];

    for(var i =0; i < attributes.length; i++) {
      list.push(attributes[i]);
    }

     list.sort(sort_attributes);

    for(var i = 0; i < list.length; i++) {
      this.removeAttribute(list[i].name, list[i].value);
    }

     for(var i = 0; i < list.length; i++) {
       this.setAttribute(list[i].name, list[i].value);
    }
  }
 });

अंतर के दूसरे तत्व के लिए समान चीज, $ ('# अलग')। अब $ ('# मूल')। Html () और $ ('# अलग')। Html () एक ही क्रम में विशेषताओं के साथ HTML कोड दिखाते हैं।


मुझे बेहतर लगता है कि यदि आप XML में अपनी html सामग्री उत्पन्न करते हैं और तब xslt का उपयोग करके इसे प्रस्तुत करते हैं। आप निश्चित रूप से अच्छे उत्पादन प्राप्त करेंगे।
नसरल्ला

8

आप फ़ायरबग में HTML टैब खोलने की कोशिश कर सकते हैं, विशेषताएँ हमेशा उसी क्रम में होती हैं


4
यह वास्तव में अपने आप में सहायक नहीं है। ऐसा इसलिए है क्योंकि यह DOM से HTML को फिर से बना रहा है, और हालांकि ऐसा होता है कि इसमें एक विशेष विशेषता पुनरावृत्ति क्रम (या मैन्युअल रूप से फायरबग सॉर्ट) है। जूलियन इसका फायदा उठा सकता है और HTML लिखने के लिए उसी तरीके का इस्तेमाल कर सकता है।
मैट कांटोर

5

दरअसल, मैं कुछ अच्छे कारणों के बारे में सोच सकता हूं। एक की पहचान मिलान के लिए और 'भिन्न' प्रकार के औजारों के साथ तुलना करने के लिए की जाएगी, जहां यह काफी कष्टप्रद है कि शब्दार्थ समान रेखाओं को "भिन्न" के रूप में चिह्नित किया जा सकता है।

असली सवाल "क्यों जावास्क्रिप्ट में है"?

यह प्रश्न "मुझे" की बदबू आती है और मुझे लगता है कि मेरे पास एक उत्तर है ... लेकिन मुझे अपने उत्तर के साथ भी समस्या है। "

यदि ओपी समझाता है कि वे ऐसा क्यों करना चाहते हैं, तो एक अच्छा जवाब पाने की उनकी संभावना नाटकीय रूप से बढ़ जाएगी।


2

प्रश्न "इसके लिए क्या आवश्यक है?" उत्तर: यह कोड को अधिक पठनीय और समझने में आसान बनाता है।

क्यों अधिकांश यूआई बेकार है ... कई प्रोग्रामर उपयोगकर्ताओं को नौकरी को सरल बनाने की आवश्यकता को समझने में विफल रहते हैं। इस मामले में, उपयोगकर्ताओं का काम कोड को पढ़ना और समझना है। विशेषताओं को ऑर्डर करने का एक कारण मानव के लिए है जिसे कोड को डीबग करना और बनाए रखना है। एक आदेशित सूची, जिसके साथ कार्यक्रम परिचित हो जाता है, उसका काम आसान हो जाता है। वह अधिक तेज़ी से विशेषताएँ खोज सकता है, या महसूस कर सकता है कि कौन सी विशेषताएँ गायब हैं, और अधिक तेज़ी से विशेषता मान बदल जाते हैं।


मेथिंक्स आपने प्रश्न के बारे में लंबे समय तक नहीं सोचा है; यहां तक ​​कि सवाल का एक काम करने वाला समाधान यह नहीं कह सकता है कि आप यहां क्या कहते हैं, हालांकि यह सच है।
issa marie tseng

आप यह क्यों मानते हैं कि ओपी जावास्क्रिप्ट के साथ ऐसा करना चाहेगा? यह संभव है कि एक सर्वर-साइड (बिल्ड टाइम?) जावास्क्रिप्ट सॉल्यूशन को ध्यान में रखा गया था, लेकिन इसकी संभावना नहीं है कि कोई व्यक्ति ऐसा करने के लिए पर्याप्त अनुभव करता है जो इसे स्टैकओवरफ़्लो पोस्ट में उल्लेख करने में विफल रहा है। यह भी संभव है कि ओपी एक ब्राउज़र एचटीएमएल संपादक को लागू कर रहा है, लेकिन यह भी संदिग्ध लगता है।
Pointy

0

यह केवल तभी मायने रखता है जब कोई स्रोत पढ़ रहा हो, इसलिए मेरे लिए यह शब्दार्थ गुण पहले है, कम शब्दार्थ अगले ...

निश्चित रूप से अपवाद हैं, यदि आपके पास उदाहरण के लिए लगातार <li> है, तो सभी पर एक विशेषता के साथ सभी और केवल कुछ पर, आप यह सुनिश्चित करना चाहते हैं कि साझा किए गए सभी शुरुआत में हों, इसके बाद अलग-अलग व्यक्ति हों, जैसे। ।

<li a = "x"> A </ li>
<li a = "y" b = "t"> B </ li>
<li a = "z"> C </ li>

(भले ही "बी" विशेषता "ए" की तुलना में अधिक उपयोगी है)

तुम्हें नया तरीका मिल गया है।


0

यह वास्तव में संभव है, मुझे लगता है, अगर html सामग्री को xml के रूप में पारित किया गया है और xslt के माध्यम से प्रदान किया गया है ... इसलिए XML में आपकी मूल सामग्री जो भी आप चाहते हैं उसी क्रम में हो सकती है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.