मैं ब’रें-ब’रें थमां इक रुझान दिक्खने आस्तै काफी लम्मी समें थमां फ्रंट-एंड विकास च ऐं: प्रोग्रामिंग दे इक नमें प्रतिमान कन्नै कम्म करने आह् ले युवा डेवलपर इसदे ऐतिहासिक संदर्भ गी समझे बगैर। कुझ न जानना, बेशक, पूरी तरह समझने आली गल्ल ऐ। वेब इक बड्डी जगह ऐ जित्थें हुनर ते विशेशताएं दा विविध सेट ऐ, ते अस हमेशा नेईं जानदे जे अस केह् नेईं जानदे। इस क्षेत्र च सिक्खना इक बारी फ्ही होंदा ऐ ते खत्म होई जंदा ऐ, बल्के इक चलदा सफर ऐ। केस इन पॉइंट: मेरी टीम दे कुसै ने पुच्छेआ जे केह् एह् दस्सना संभव ऐ जे बरतूनी यूआई च कुसै खास टैब थमां दूर नेविगेट करदे न। मैं जावास्क्रिप्ट दी beforeunload घटना गी इंगित कीता। पर जेह् ड़े इस थमां पैह् ले निबड़दे न ओह् जानदे न जे एह् संभव ऐ की जे उ’नेंगी होर साइटें पर अनसेव कीते गेदे डेटा दे बारे च अलर्टें कन्नै मारया गेआ ऐ, जिसदे लेई बिफोरअनलोड इक ठेठ इस्तेमाल दा मामला ऐ। मैं अपने साथी गी अच्छे माप आस्तै pageHide ते visibilityChange घटनाएं गी बी इंगित कीता। उस बारे च मिगी किस चाल्ली पता लग्गा? कीजे एह् इक होर प्रोजेक्ट च आया हा, इस आस्तै नेईं जे मैं शुरू च जावास्क्रिप्ट सिखने पर इस पर पढ़ाई कीती ही। असल गल्ल एह् ऐ जे आधुनिक फ्रंट-एंड फ्रेमवर्क उंदे कोला पैह्ले दे टेक्नोलॉजी दिग्गजें दे कंधें उप्पर खड़ोते दे न। एह् विकास प्रथाएं गी अमूर्त करदे न, अक्सर इक बेहतर विकासक अनुभव आस्तै जेह् ड़ा इस गल्लै गी जानने जां छूने दी लोड़ गी घट्ट करदा ऐ, जां इत्थूं तगर जे खत्म करी दिंदा ऐ जे परंपरागत रूप कन्नै जरूरी फ्रंट-एंड अवधारणाएं गी शायद हर कुसै गी जानना चाहिदा ऐ। सीएसएस ऑब्जेक्ट मॉडल (सीएसएसओएम) पर विचार करो। तुस उम्मीद करी सकदे ओ जे CSS ते जावास्क्रिप्ट च कम्म करने आह् ले कुसै गी बी हत्थ-पैर कन्नै CSSOM अनुभव दा इक गुच्छा ऐ, पर एह् हमेशा नेईं होग. इक ई-कॉमर्स साइट आस्तै इक रिएक्ट प्रोजेक्ट हा जिस पर मैं कम्म कीता हा जित्थै असेंगी इसलै चुने गेदे भुगतान प्रदाता आस्तै इक स्टाइलशीट लोड करने दी लोड़ ही। समस्या एह् ही जे स्टाइलशीट हर पेज पर लोड होआ करदी ही जिसलै इसदी असल च सिर्फ इक विशिष्ट पेज पर गै लोड़ ही। इसगी होने दा कम्म सौंपे गेदे डेवलपर ने कदें बी डायनामिक रूप कन्नै स्टाइलशीट लोड नेईं कीती ही। फिर, एह् पूरी चाल्ली समझने आह् ला ऐ जिसलै रिएक्ट उस परंपरागत दृष्टिकोण गी दूर सार करदा ऐ जिसदे कोल तुस पुज्जी गेदे ओ। संभावना ऐ जे CSSOM कोई ऐसी चीज नेईं ऐ जिसदी तुसेंगी अपने रोजमर्रा दे कम्मै च लोड़ ऐ। पर संभावना ऐ जे तुसेंगी कुसै समें इस कन्नै गल्लबात करने दी लोड़ होग, इक बारी दे मामले च बी। इनें अनुभवें ने मिगी एह् लेख लिखने दी प्रेरणा दित्ती। जंगलें च मते सारे मौजूदा वेब फीचर ते तकनीकें न जिनेंगी तुस अपने रोजमर्रा दे कम्मै च कदें बी सीधे तौर पर नेईं छूई सकदे। शायद तुस वेब विकास च काफी नमें ओ ते उ’नेंगी बस अनजान ओ कीजे तुस इक विशिष्ट ढांचे दे अमूर्तता च डुब्बी गेदे ओ जेह् ड़ा तुसेंगी इसगी गहराई कन्नै जानने दी लोड़ नेईं ऐ, जां इत्थूं तगर जे बिल्कुल बी। मैं खास तौर उप्पर XML दे बारे च गल्ल करा’रदा ऐं, जेह् ड़ी साढ़े च मते सारें गी पता ऐ जे एह् इक प्राचीन भाशा ऐ जेह् ड़ी HTML थमां बिल्कुल बक्खरी नेईं ऐ। मैं इसगी हाल च WHATWG चर्चाएं दे कारण लेई आना ऐ जेह् ड़ी सुझाऽ दिंदी ऐ जे XSLT प्रोग्रामिंग दे रूप च जाने आह् ले XML स्टैक दा इक मता हिस्सा ब्राउज़रें थमां हटाना चाहिदा ऐ. एह् बिल्कुल उस्सै चाल्ली दी पुरानी, मौजूदा तकनीक ऐ जेह् ड़ी साढ़े कोल बरें थमां ऐ जेह् ड़ी कुसै चीजै आस्तै इस्तेमाल कीती जाई सकदी ऐ जितना कि सीएसएसओएम दी स्थिति जिस च मेरी टीम ही। क्या तुसें पैह् ले XSLT कन्नै कम्म कीता ऐ ? आओ दिक्खने आं जे अस इस पुरानी तकनीक च मता झुकने आं ते अज्जै दे असली दुनिया दी समस्याएं कन्नै निबड़ने लेई एक्सएमएल दे संदर्भ थमां बाह् र इसदे फीचरें दा फायदा लैंदे आं जां नेईं। एक्सपाथ: केंद्रीय एपीआई सबनें शा मती जरूरी XML तकनीक जेह् ड़ी शायद सीधे XML परिप्रेक्ष्य दे बाहर सारें शा मती उपयोगी ऐ XPath ऐ , जेह् ड़ी इक क्वेरी भाशा ऐ जेह् ड़ी तुसेंगी इक जड़ तत्व कन्नै मार्कअप ट्री च कुसै बी नोड जां विशेषता गी ढूंढने दी इजाजत दिंदी ऐ । XSLT कन्नै मेरा निजी स्नेह ऐ, पर एह् बी XPath पर निर्भर करदा ऐ, ते रैंकिंग महत्व च निजी स्नेह गी इक पास्सै रक्खना लोड़चदा ऐ। XSLT गी हटाने दी दलील XPath दा कोई जिक्र नेईं करदी ऐ, इसलेई मेरा मानना ऐ जे इसदी अजें बी अनुमति ऐ. एह् अच्छा ऐ की जे XPath इस तकनीकें दे सूट च केंद्रीय ते सारें शा मता जरूरी एपीआई ऐ , खास करियै जिसलै सामान्य XML बरतून थमां बाह् र बरतने आस्तै कुसै चीजै गी तुप्पने दी कोशश कीती जंदी ऐ । एह् इसलेई जरूरी ऐ की जे, जदके CSS चयनकर्ताएं दा इस्तेमाल तुंदे पृष्ठ च मते सारे तत्वें गी ढूंढने लेई कीता जाई सकदा ऐ, तां ओह् सारे नेईं पाई सकदे न. इ’दे अलावा, सीएसएस चयनकर्ताएं दा इस्तेमाल डीओएम च इसदी मौजूदा स्थिति दे आधार उप्पर इक तत्व गी ढूँढने लेई नेईं कीता जाई सकदा ऐ. एक्सपाथ कर सकदा ऐ। हुण, तुंदे च किश गी एह् पढ़ने आह् ले शायद एक्सपैथ जानदे होन, ते कुसै गी नेईं। XPath तकनीक दा इक बड़ा बड्डा क्षेत्र ऐ, ते मैं सच्चें गै सारे बुनियादी गल्लां नेईं सिखा सकदा ते इस चाल्ली दे इक लेख च तुसेंगी इस कन्नै करने आह् ली मस्त गल्लां बी नेईं दस्सी सकदा। मैं असल च उस लेख गी लिखने दी कोशश कीती ही, पर औसतन स्मैशिंग मैगजीन दा प्रकाशन 5000 शब्दें कोला बी मता नेईं होंदा। मैं पैह्लें गै उसदे कोला बी मते पर हा2000 शब्द जबकि बुनियादी गल्लां दा आधा रास्ता ही। तो, मैं XPath कन्नै मस्त चीजां करना शुरू करगा ते तुसेंगी किश लिंक देना ऐ जेह् ड़े तुस बुनियादी चीजें आस्तै इस्तेमाल करी सकदे ओ जेकर तुसेंगी एह् सामान दिलचस्प लगदा ऐ। एक्सपाथ ते सीएसएस गी मिलाना XPath मते सारे कम्म करी सकदा ऐ जेह् ड़े CSS चयनकर्ता तत्वें दी क्वेरी करदे बेल्लै नेईं करी सकदे न. पर CSS चयनकर्ता किश ऐसे कम्म बी करी सकदे न जेह् ड़े XPath नेईं करी सकदा, अर्थात, क्लास दे नांऽ कन्नै तत्वें गी क्वेरी करना।
सीएसएस एक्सपाथ .मेरी क्लास दा /* [contains (@ क्लास, "मेरी क्लास")]।
इस उदाहरन च, CSS उनें तत्वें दी क्वेरी करदा ऐ जिंदे च .myClass क्लासनाम होंदा ऐ. इस बीच, XPath उदाहरण उनें तत्वें गी क्वेरी करदा ऐ जिंदे च स्ट्रिंग "myClass" कन्नै इक एट्रिब्यूट क्लास होंदा ऐ। दूए शबदां च, एह् कुसै बी विशेषता च myClass आह् ले तत्वें गी चुनदा ऐ, जिंदे च .myClass क्लासनाम आह् ले तत्व बी शामल न — ते कन्नै गै स्ट्रिंग च "myClass" आह् ले तत्व बी शामल न, जि'यां .myClass2. एक्सपैथ उस अर्थ च व्यापक ऐ। तो, नहीं। मैं एह् नेईं आक्खना जे असेंगी CSS गी टॉस आउट करना चाहिदा ते XPath दे राहें सारे तत्वें गी चुनना शुरू करना चाहिदा. इ’यां गै गल्ल नेईं ऐ। मुद्दा एह् ऐ जे एक्सपैथ ऐसे कम्म करी सकदा ऐ जेह् ड़े सीएसएस नेईं करी सकदा ते अजें बी मता उपयोगी होई सकदा ऐ, हालाँकि एह् ब्राउज़र स्टैक च इक पुरानी तकनीक ऐ ते पैह् ली नजर च साफ नेईं लग्गी सकदी ऐ। आओ दोऐ तकनीकें दा इक साथ इस्तेमाल करचै न सिर्फ इस आस्तै जे अस करी सकने आं, बल्के इस आस्तै जे अस इस प्रक्रिया च XPath दे बारे च किश जानगे, इसगी तुंदे ढेर च इक होर उपकरण बनाइयै — इक ऐसा उपकरण जेह् ड़ा तुसें गी शायद नेईं पता हा जे ओह् सारे समें थमां गै ऐ! समस्या एह् ऐ जे जावास्क्रिप्ट दी document.evaluate विधि ते बक्ख-बक्ख क्वेरी चयनकर्ता तरीके जेह् ड़े अस जावास्क्रिप्ट आस्तै CSS एपीआई कन्नै बरतने आं असंगत न. मैं असेंगी शुरू करने आस्तै इक संगत क्वेरी एपीआई बनाया ऐ, हालांकि एह् मन्नेआ जा जे मैं इस च मता सोचेआ नेईं ऐ की जे एह् जेह् ड़ा अस इत्थै करा’रदे आं, उसदे कोला हटना ऐ। इत्थै इक पुन: उपयोग करने योग्य क्वेरी कन्स्ट्रक्टर दा इक काफी सरल कम्म करने आह् ला उदाहरण ऐ: ब्रायन रासमुसेन द्वारा पेन क्वेरीएक्सपाथ [कांटा] देखें। मैं दस्तावेज वस्तु पर दो तरीके जोड़े न: queryCSSSelectors (जेह् ड़ा जरूरी रूप कन्नै querySelectorAll ऐ) ते queryXPaths. एह् दवैं इक queryResults वस्तु वापस करदे न:
{ queryType: नोड्स | तार | नंबर | बूलियन, नतीजे: कोई भी [] // html तत्व, xml तत्व, स्ट्रिंग्स, संख्या, बूलियन, queryCSSSelectors: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट, queryXpaths: (क्वेरी: स्ट्रिंग, संशोधन: बूलियन) => क्वेरीरिजल्ट } ऐ
queryCSSSelectors ते queryXpaths फ़ंक्शन तुसें गी दित्ती गेदी क्वेरी गी नतीजे सरणी च तत्वें उप्पर चलांदे न, जदूं तगर नतीजे सरणी टाइप नोड्स दी ऐ, बेशक. नेईं ते, एह् इक खाली सरणी ते इक किस्म दे नोड्स कन्नै इक queryResult वापस करग. जेकर संशोधन गुण सच्च पर सेट कीता गेदा ऐ तां फ़ंक्शन अपने खुद दे queryResults बदलङन. कुसै बी हालत च इसदा इस्तेमाल उत्पादन दे माहौल च नेईं कीता जाना चाहिदा। मैं एह् इस चाल्ली विशुद्ध रूप कन्नै दो क्वेरी एपीआई गी इक कन्नै इस्तेमाल करने दे बक्ख-बक्ख प्रभावें गी प्रदर्शित करने आस्तै करा’रदा ऐ। उदाहरण दे तौर पर क्वेरीज मैं बक्ख-बक्ख XPath क्वेरी दे किश उदाहरण दस्सना चांह् दा ऐ जेह् ड़े किश शक्तिशाली कम्में गी दर्शांदे न जेह् ड़ियां ओह् करी सकदे न ते उंदा इस्तेमाल होर दस्तावेजें दी जगह किस चाल्ली कीता जाई सकदा ऐ। पैह्ला उदाहरण //li/text() ऐ। एह् सारे li तत्वें गी क्वेरी करदा ऐ ते उंदे पाठ नोड्स गी वापस करदा ऐ। तो, अगर असी निम्नलिखित एचटीएमएल क्वेरी करदे हां: <उल>
...एह् गै वापस कीता जंदा ऐ:
{"queryType":"xpathEvaluate","परिणाम":["एक","दो","तीन"],"resultType":"स्ट्रिंग"}
दूए शबदां च, असेंगी निम्नलिखित सरणी मिलदी ऐ: ["एक","दो","तीन"]। आमतौर पर, तुस उस गी हासल करने आस्तै li तत्वें आस्तै क्वेरी करगेओ, उस क्वेरी दे नतीजे गी सरणी च बदलगे, सरणी दा मैप करगे, ते हर तत्व दा पाठ नोड वापस करगे. पर अस एह् XPath कन्नै होर संक्षेप च करी सकने आं: document.queryXPaths ("//li/text ()").परिणाम।
ध्यान रक्खो जे पाठ नोड हासल करने दा तरीका text() दा इस्तेमाल करना ऐ, जेह् ड़ा इक फंक्शन हस्ताक्षर दी तर्ज पर दिक्खने गी मिलदा ऐ — ते एह् ऐ. एह् कुसै तत्व दा पाठ नोड वापस करदा ऐ। साढ़े उदाहरन च, मार्कअप च त्रै ली तत्व न, हर इक च पाठ ("इक", "दो", ते "त्रै") ऐ।
आओ, इक text() क्वेरी दा इक होर उदाहरण दिक्खने आं। मान लीजिए कि एह् साढ़ा मार्कअप ऐ:
आओ इक क्वेरी लिखने आं जेह् ड़ी href एट्रिब्यूट वैल्यू रिटर्न करदी ऐ: document.queryXPaths ("//a [text () = 'साइन इन'] / @href"). नतीजे।
एह् मौजूदा दस्तावेज़ पर इक XPath क्वेरी ऐ, ठीक पिछले उदाहरन दी तर्ज पर, पर इस बारी अस इक लिंक (इक तत्व) दी href विशेषता गी वापस करदे आं जेह् ड़ा "साइन इन" पाठ होंदा ऐ। असल वापस आ गयानतीजा ["/login.html"] ऐ। एक्सपाथ फंक्शनें दा अवलोकन XPath फंक्शनें दी इक नंबर ऐ, ते तुस शायद उंदे कन्नै अनजान ओ। कई ऐसे न, मेरा ख्याल ऐ, जेह्ड़े जानने दे काबिल न, जिंदे च निम्नलिखित बी शामल न:
starts-withजेकर कोई पाठ कुसै खास होर पाठ उदाहरण कन्नै शुरू होंदा ऐ तां starts-with(@href, 'http:') सच्चा वापस करदा ऐ जेकर कोई href विशेषता http: कन्नै शुरू होंदी ऐ. containsजेकर कुसै पाठ च कोई खास होर पाठ उदाहरण ऐ तां contains(text(), "स्मैशिंग मैगजीन") सच्चा रिटर्न करदा ऐ जेकर कुसै टेक्स्ट नोड च कुतै बी "स्मैशिंग मैगजीन" शब्द होंदे न. count इक क्वेरी च कितने मिलान न इसदी गिनती वापस करदा ऐ. मसाल आस्तै, count(//*[starts-with(@href, 'http:']) इक गिनती वापस करदा ऐ जे संदर्भ नोड च कितने लिंक च इक href विशेषता आह् ले तत्व न जिंदे च http: कन्नै शुरू होने आह् ला पाठ होंदा ऐ. substringजावास्क्रिप्ट सबस्ट्रिंग दी तर्ज पर कम्म करदा ऐ, सिवाय इसदे के तुस स्ट्रिंग गी इक तर्क दे रूप च पास करदे ओ. उदाहरण दे तौर पर, सबस्ट्रिंग ("मेरा पाठ", 2, 4) "वाई टी" रिटर्न करदा ऐ। substring-before इक स्ट्रिंग दे हिस्से गी कुसै होर स्ट्रिंग थमां पैह् ले वापस करदा ऐ. उदाहरण दे तौर पर, substing-before("मेरा पाठ", " ") "मेरा" वापस करदा ऐ. इसी तरह, substring-before("hi","bye") इक खाली स्ट्रिंग वापस करदा ऐ. substring-afterइक होर स्ट्रिंग दे बाद इक स्ट्रिंग दे हिस्से गी वापस करदा ऐ. उदाहरण दे तौर पर, substing-after("मेरा पाठ", " ") "पाठ" वापस करदा ऐ. इसी तरह, substring-after("hi","bye") इक खाली स्ट्रिंग वापस करदा ऐ. normalize-space अग्गें ते पिच्छें सफेद स्पेस गी स्ट्रिप करियै ते सफेद स्पेस वर्णें दे अनुक्रमें गी इक गै स्पेस कन्नै बदलियै सामान्य कीते गेदे व्हाइटस्पेस कन्नै आर्गुमेंट स्ट्रिंग गी वापस करदा ऐ. notReturns इक बूलियन सच्चा जेकर तर्क गलत ऐ, नेईं ते गलत ऐ. trueबूलियन सच्चा रिटर्न करदा ऐ। falseबूलियन गलत वापस करदा ऐ। concatजावास्क्रिप्ट concat दे समान गै गल्ल, सिवाय इसदे के तुस इसगी स्ट्रिंग पर इक विधि दे रूप च नेईं चलांदे ओ. इसदे बजाय, तुस उनें सारे तारें गी अंदर पांदे ओ जिनेंगी तुस जोड़ना चांह् दे ओ। string-lengthएह् जावास्क्रिप्ट string-length दे समान नेईं ऐ, बल्के एह् स्ट्रिंग दी लंबाई वापस करदा ऐ जेह् ड़ी इसगी तर्क दे रूप च दित्ती गेदी ऐ. translateएह् इक स्ट्रिंग लैंदा ऐ ते दूए तर्क गी त्रीए तर्क च बदलदा ऐ. उदाहरण दे तौर पर, translate("abcdef", "abc", "XYZ") XYZdef आउटपुट करदा ऐ.
इनें खास XPath फंक्शनें दे अलावा, होर बी केईं फंक्शन न जेह् ड़े अपने जावास्क्रिप्ट समकक्षें दे समान गै कम्म करदे न — जां मूल रूप कन्नै कुसै बी प्रोग्रामिंग भाशा च समकक्ष — जेह् ड़े तुसेंगी शायद बी उपयोगी लग्गङन, जि’यां फर्श, छत, गोल, योग, ते होर. निम्नलिखित डेमो इनें हर इक फंक्शनें गी दर्शांदा ऐ: पेन एक्सपैथ ब्रायन रासमुसेन द्वारा संख्यात्मक फ़ंक्शन [कांटा] दिक्खो। ध्यान रक्खो जे, मते सारे स्ट्रिंग हेरफेर फंक्शनें दी तर्ज पर, मते सारे संख्यात्मक इक गै इनपुट लैंदे न. एह्, बेशक्क, कीजे उंदा इस्तेमाल क्वेरी आस्तै कीता जाना चाहिदा ऐ, जि'यां पिछले XPath उदाहरन च: //li [मंजिल (पाठ ()) > 250] / @ वैल
जेकर तुस उंदा इस्तेमाल करदे ओ, जि'यां मते सारे उदाहरण करदे न, तां तुस इसगी पैह् ले नोड पर चलाने दा अंत करगे जेह् ड़ा रस्ते कन्नै मेल खांदा ऐ. किश टाइप रूपांतरण फ़ंक्शन बी न जिंदे कन्नै तुसेंगी शायद बचना चाहिदा कीजे जावास्क्रिप्ट च पैह् ले थमां गै अपनी टाइप रूपांतरण दी समस्यां न. पर ऐसे समें बी होई सकदे न जिसलै तुस कुसै होर नंबर कन्नै जांच करने आस्तै कुसै स्ट्रिंग गी इक नंबर च बदलना चांह् दे ओ। कुसै चीज़ दा प्रकार सेट करने आह् ले फंक्शन बूलियन, नंबर, स्ट्रिंग, ते नोड न। एह् महत्वपूर्ण XPath डेटाटाइप न। ते जि’यां तुस सोच सकदे ओ, इनें फंक्शनें च मते सारें दा इस्तेमाल डाटाटाइपें पर कीता जाई सकदा ऐ जेह् ड़े डीओएम नोड्स नेईं न। मसाल आस्तै, सबस्ट्रिंग-आफ्टर इक स्ट्रिंग लैंदा ऐ जि’यां असें पैह् ले थमां गै कवर कीता ऐ, पर एह् इक href विशेषता थमां स्ट्रिंग होई सकदी ऐ. एह् सिर्फ इक तार बी होई सकदा ऐ:
const testSubstringAfter = document.queryXPaths ("सबस्ट्रिंग-बाद ('नमस्ते दुनिया',' ')");
जाहिर ऐ जे एह् उदाहरन असेंगी नतीजे सरणी गी ["दुनिया"] दे रूप च वापस देग। इसगी कार्रवाई च दस्सने आस्तै, मैं उनें चीजें दे खलाफ फंक्शनें दा इस्तेमाल करियै इक डेमो पेज बनाया ऐ जेह् ड़े DOM नोड्स नेईं न: ब्रायन रासमुसेन द्वारा पेन क्वेरीएक्सपाथ [कांटा] देखें। तुसें गी अनुवाद फ़ंक्शन दा हैरानी आह् ला पहलू नोट करना चाहिदा ऐ, जेह् ड़ा एह् ऐ जे जेकर तुंदे कोल दुए तर्क च कोई वर्ण ऐ (अर्थात, वर्णें दी सूची जेह् ड़ी तुस अनुवाद करना चांह् दे ओ) ते अनुवाद करने आस्तै कोई मिलान वर्ण नेईं ऐ तां ओह् वर्ण आउटपुट थमां हटाई दित्ता जंदा ऐ. इस चाल्ली, एह्:
translate('नमस्ते, मेरा नाम इनिगो मोंटोया ऐ, तुसें मेरे पिता गी मारी दित्ता, मरने दी तैयारी करो','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','*')
...स्ट्रिंग च नतीजे, जिंदे च रिक्त स्थान बी शामल न: [" * * ** "] ऐ।
इसदा मतलब ऐ जे अक्षर "a" दा अनुवाद तारे (*) च कीता जा करदा ऐ, पर हर दूआ वर्ण जिसदा अनुवाद नेईं ऐ जिसदा लक्ष्य स्ट्रिंग दित्ता गेदा ऐ, पूरी चाल्ली हटाई दित्ता जंदा ऐ। सफेद जगह ही साडे कोल सब कुछ बची हैअनुवादित “ए” वर्णें दे बीच। फिर फिर, ए क्वेरी:
translate('नमस्ते, मेरा नाम इनिगो मोंटोया ऐ, तुसें मेरे पिता गी मारी दित्ता, मरने दी तैयारी करो','abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,','******************************************************')")
...समस्या नेईं ऐ ते इक नतीजा आउटपुट करदा ऐ जेह् ड़ा इस चाल्ली दिक्खदा ऐ:
"***** ** **** ** ***** ******* *** ****** ** ****** ******* ** ***"
एह् तुसेंगी चकमा देई सकदा ऐ जे जावास्क्रिप्ट च ठीक उऐ करने दा कोई आसान तरीका नेईं ऐ जेह् ड़ा XPath अनुवाद फ़ंक्शन करदा ऐ, हालांकि मते सारे इस्तेमाल मामलें आस्तै, नियमित अभिव्यक्ति कन्नै replaceAll इसगी संभाली सकदा ऐ. तुस उस्सै तरीका दा इस्तेमाल करी सकदे ओ जेह् ड़ा मैं प्रदर्शित कीता ऐ, पर जेकर तुस सिर्फ स्ट्रिंग्स दा अनुवाद करना चांह् दे ओ तां एह् सबऑप्टिमल ऐ। निम्नलिखित डेमो जावास्क्रिप्ट संस्करण उपलब्ध करोआने लेई XPath दे अनुवाद फ़ंक्शन गी लपेटदा ऐ: ब्रायन रासमुसेन द्वारा पेन अनुवाद फ़ंक्शन [कांटा] देखें। तुस इस चाल्ली दी कुसै चीजै दा इस्तेमाल कुत्थें करी सकदे ओ? त्रै-प्लेस ऑफसेट कन्नै सीज़र सिफर एन्क्रिप्शन पर विचार करो (जियां, 48 बी.सी. थमां टॉप-ऑफ-द-लाइन एन्क्रिप्शन):
translate("सीजर रूबिकन पार करने दी योजना बना करदा ऐ!", "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",। "XYZABCDEFGHIJKLMNOPQRSTUVWxyzabcdefghijklmnopqrstuvw") ऐ।
इनपुट पाठ “सीजर रूबिकन गी पार करने दी योजना बना करदा ऐ!” नतीजे च “Zxbpxo fp mixkkfkd ql zolpp qeb Oryfzlk!” बक्ख-बक्ख संभावनाएं दा इक होर त्वरित उदाहरण देने आस्तै, मैं इक धातु फंक्शन बनाया जेह् ड़ा इक स्ट्रिंग इनपुट लैंदा ऐ ते पाठ गी वापस करने आस्तै इक अनुवाद फ़ंक्शन दा इस्तेमाल करदा ऐ, जिंदे च सारे वर्ण बी शामल न जेह् ड़े उमलाउट लैंदे न। ब्रायन रासमुसेन द्वारा पेन मेटल फंक्शन [कांटा] देखें।
const धातु = (स्ट्रे) => { return translate (str, "AOUaou","ÄÖÜäöü"); } ऐ
और, अगर पाठ “मोटली क्रू नियम, रॉक ऑन ड्यूड्स!”, वापस करदा ऐ “मोटली क्रू rüles, röck ön düdes!” जाहिर सी कि इस फंक्शन दे हर तरह दे पैरोडी इस्तेमाल हो सकदे ने। जेकर तुस गै ओ तां इस टीवीट्रोप्स आलेख गी तुसेंगी मती प्रेरणा देनी चाहिदी। एक्सपाथ कन्नै सीएसएस दा इस्तेमाल करना XPath कन्नै मिलियै CSS चयनकर्ताएं दा इस्तेमाल करने दा साढ़ा मुक्ख कारण याद रक्खो: CSS बड़ी मती समझदा ऐ जे इक क्लास केह् ऐ, जिसलै के XPath कन्नै तुस सारें शा बेहतर करी सकदे ओ क्लास एट्रिब्यूट दी स्ट्रिंग तुलना ऐ. जो ज्यादातर मामलें च कम्म करग। पर जेकर तुसें गी कदें बी ऐसी स्थिति च पौना ऐ जित्थै, आखने आस्तै, कुसै ने .primaryLinks ते .primaryLinks2 नांऽ आह् ली क्लासां बनाईयां न ते तुस .primaryLinks क्लास हासल करने आस्तै XPath दा इस्तेमाल करा करदे ओ, तां संभावना ऐ जे तुसेंगी समस्याएं च पौंदियां न. जदूं तगर इस चाल्ली दी कोई मूर्खता नेईं ऐ, तां तुस शायद XPath दा इस्तेमाल करगे। पर मैं इस गल्ल दी रिपोर्ट करदे होई दुखी आं जे मैं उनें थाह् रें पर कम्म कीता ऐ जित्थें लोक उनें किस्म दे मूर्खतापूर्ण कम्म करदे न। इत्थै CSS ते XPath दा इक साथ इस्तेमाल करने आह् ला इक होर डेमो ऐ। एह् दस्सदा ऐ जे जिसलै अस कोड दा इस्तेमाल उस संदर्भ नोड पर XPath चलाने आस्तै करदे आं जेह् ड़ा दस्तावेज दा नोड नेईं ऐ तां केह् होंदा ऐ. ब्रायन रासमुसेन द्वारा पेन css ते xpath गी इक साथ [कांटा] दिक्खो। CSS क्वेरी .relatedarticles a ऐ, जेह् ड़ी इक .relatedarticles वर्ग असाइन कीते गेदे div च दो a तत्वें गी लैंदी ऐ. उसदे बाद त्रै "बुरी" क्वेरी होंदे न, मतलब ऐ जे क्वेरी जेह् ड़ियां ओह् नेईं करदियां न जेह् ड़ियां अस चाह्न्ने आं जे इनें तत्वें कन्नै संदर्भ नोड दे रूप च चलांदे न। मैं समझा सकदा हां कि ओह तुहाडी उम्मीद तों वी अलग बर्ताव क्यों कर रहे हन। सवालिया त्रै बुरी क्वेरी न:
//text(): दस्तावेज़ च सारे पाठ वापस करदा ऐ। //a/text(): दस्तावेज़ च लिंक दे अंदर सारे पाठ वापस करदा ऐ। ./a/text(): कोई नतीजा नेईं दिंदा।
इनें नतीजें दा कारण एह् ऐ जे जिसलै तुंदा संदर्भ सीएसएस क्वेरी थमां वापस कीते गेदे इक तत्व न, // पूरे दस्तावेज दे खलाफ चली जंदा ऐ. एह् एक्सपाथ दी ताकत ऐ; सीएसएस इक नोड थमां इक पूर्वज तगर ते फिर उस पूर्वज दे इक भैन-भ्रा तगर नेईं जाई सकदा, ते उस भैन-भ्रा दे इक वंशज तगर नेईं जाई सकदा। पर एक्सपाथ कर सकदा ऐ। इस बीच, ./ मौजूदा नोड दे बच्चें थमां क्वेरी करदा ऐ, जित्थै बिंदु (.) मौजूदा नोड दा प्रतिनिधित्व करदा ऐ, ते अग्गें स्लैश (/) कुसै चाइल्ड नोड च जाने दा प्रतिनिधित्व करदा ऐ — चाहे एह् इक विशेषता, तत्व, जां पाठ ऐ, एह् रस्ते दे अगले हिस्से कन्नै निर्धारत कीता जंदा ऐ. पर कोई बी बच्चा CSS क्वेरी आसेआ चुनेआ गेदा इक तत्व नेईं ऐ, इस चाल्ली ओह क्वेरी बी कुसै बी चीजै गी वापस नेईं करदी ऐ. उस आखरी डेमो च त्रै अच्छे क्वेरी न:
.//पाठ (), ./पाठ (), ऐ। सामान्य करो-स्पेस (. / पाठ ())।
नॉर्मलाइज-स्पेस क्वेरी XPath फंक्शन दे इस्तेमाल दा प्रदर्शन करदी ऐ, पर दूई क्वेरी च शामल इक समस्या गी बी ठीक करदी ऐ. एचटीएमएल दी संरचना इस चाल्ली कीती गेदी ऐ:
सेलेनियम वेबड्राइवर कन्नै अपने फीचर परीक्षण गी स्वचालित करना
क्वेरी पाठ नोड दे शुरू ते अंत च इक लाइन फीड वापस करदी ऐ,ते normalize-space इसगी हटांदा ऐ। कुसै बी XPath फंक्शन दा इस्तेमाल करना जेह् ड़ा इनपुट XPath कन्नै बूलियन दे अलावा कुसै होर चीज़ गी रिटर्न करदा ऐ, होर फंक्शनें पर लागू होंदा ऐ. निम्नलिखित डेमो च केईं उदाहरण दस्सदे न: ब्रायन रासमुसेन द्वारा पेन xpath फंक्शन्स उदाहरण [कांटा] दिक्खो। पैह् ला उदाहरन इक समस्या गी दस्सदा ऐ जिस पर तुसेंगी ध्यान देना चाहिदा। खास तौर उप्पर, निम्नलिखित कोड:
document.queryXPaths ("सबस्ट्रिंग-बाद (//a/@href,'https://')");
...इक स्ट्रिंग वापस करदा ऐ:
"www.smashingmagazine.com/2018/04/फीचर-परीक्षण-सेलेनियम-वेबड्राइवर/"
समझ च औंदा ऐ, नेईं? एह् फंक्शन सरणी नेईं बल्के सिंगल स्ट्रिंग जां इकल नंबर वापस करदे न. फंक्शन गी कुतै बी मते नतीजें कन्नै चलाने कन्नै सिर्फ पैह् ला नतीजा गै मिलदा ऐ. दूआ नतीजा दस्सदा ऐ के अस असल च के चाह्न्ने आं:
document.queryCSSSelectors ("एक").queryXPaths ("सबस्ट्रिंग-बाद (./@href,'https://')");
जेह् ड़ी दो स्ट्रिंगें दी सरणी वापस करदी ऐ:
["www.smashingmagazine.com/2018/04/फीचर-टेस्टिंग-सेलेनियम-वेबड्राइवर/","www.smashingmagazine.com/2022/11/स्वचालित-परीक्षण-परिणाम-सुधार-सुलभ-सुलभ/"]
XPath फंक्शनें गी जावास्क्रिप्ट च फंक्शनें दी तर्ज पर नेस्ट कीता जाई सकदा ऐ। तो, जेकर अस स्मैशिंग मैगजीन URL संरचना गी जानने आं तां अस निम्नलिखित करी सकने आं (टेम्पलेट लिटरेल्स दा इस्तेमाल करने दी सलाह दित्ती जंदी ऐ): `अनुवाद करना ( सबस्ट्रिंग ( सबस्ट्रिंग-आफ्टर (./@href, ‘www.smashingmagazine.com/') ऐ। ,९), ऐ। '/','')`
एह् इस हद तकर थोड़ा मता जटिल होआ करदा ऐ जे इसगी एह् दस्सने आह् ली टिप्पणियें दी लोड़ ऐ: www.smashingmagazine.com/ दे बाद href विशेषता थमां सारे URL लैओ, पैह् ले नौ वर्णें गी हटाओ, फिर अग्गें स्लैश (/) वर्ण गी कुसै बी चाल्ली दा अनुवाद करो तां जे समाप्त होने आह् ले अग्गें स्लैश थमां छुटकारा मिलै। नतीजे च सरणी:
["फीचर-परीक्षण-सेलेनियम-वेबड्राइवर","स्वचालित-परीक्षण-परिणाम-सुधार-सुलभ-सुलभ"]
होर एक्सपाथ यूज केस XPath सचमुच परीक्षण च चमक सकदा ऐ। कारण दिक्खना मुश्कल नेईं ऐ, की जे XPath दा इस्तेमाल DOM च हर इक तत्व गी हासल करने लेई कीता जाई सकदा ऐ, DOM च कुसै बी स्थिति थमां, जिसलै के CSS नेईं करी सकदा. तुस मते सारे आधुनिक बिल्ड सिस्टम च CSS क्लासें गी लगातार बने दे रौह् ने पर भरोसा नेईं करी सकदे, पर XPath कन्नै, अस इस गल्लै गी होर मजबूत मिलान बनाने च समर्थ आं जे इक तत्व दी पाठ सामग्री केह् ऐ, चाहे ओह् बदलदी DOM संरचना दी परवाह नेईं करै. ऐसी तकनीकें पर शोध कीता गेआ ऐ जेह् ड़ी तुसेंगी लचीला एक्सपैथ परीक्षण करने दी अनुमति दिंदी ऐ। परीक्षणें गी फ्लेक्स आउट ते फेल होने थमां बुरा कोई बी नेईं ऐ सिर्फ इस आस्तै जे इक CSS चयनकर्ता हून कम्म नेईं करदा कीजे कुसै चीज दा नांऽ बदली दित्ता गेआ ऐ जां हटाई दित्ता गेआ ऐ. XPath मल्टीपल लोकेटर निष्कर्षण पर बी वास्तव च महान ऐ। इक तत्व कन्नै मेल खाने आस्तै XPath क्वेरी दा इस्तेमाल करने दे इक थमां मते तरीके न. सीएसएस दे कन्नै बी इ'यै हाल ऐ। पर XPath क्वेरी होर लक्ष्यित तरीके कन्नै चीजें च ड्रिल करी सकदियां न जेह् ड़ी जेह् ड़ी वापस कीती जंदी ऐ उसी सीमित करदी ऐ , जेह् ड़ी तुसेंगी इक विशिष्ट मिलान गी ढूंढने दी इजाजत दिंदी ऐ जित्थै केईं संभावित मिलान होई सकदे न. मसाल आस्तै, अस इक विशिष्ट h2 तत्व गी वापस करने आस्तै XPath दा इस्तेमाल करी सकने आं जेह् ड़ा इक div दे अंदर होंदा ऐ जेह् ड़ा तुरत इक भैन-भ्रा div दे बाद होंदा ऐ जेह् ड़ा, बदले च, इक बाल छवि तत्व होंदा ऐ जिस पर data-testID="leader" विशेषता होंदी ऐ:
इस हेडलाइन गी नेईं मिलना
इस हेडलाइन गी बी नेईं पाओ
लीडर छवि आस्तै हेडर
एह् क्वेरी ऐ: दस्तावेज़.क्वेरीएक्सपथ (` //डिव [ निम्नलिखित-भाई::div [1] ऐ। /img [@data-testID = 'नेता'] ऐ। ] /ह2/ ऐ। पाठ () `);
आओ इक डेमो ड्रॉप करचे तां जे एह् सब किश किस चाल्ली इकट्ठा होंदा ऐ: ब्रायन रासमुसेन द्वारा पेन कॉम्प्लेक्स एच 2 क्वेरी [कांटा] देखें। तो, हां। XPath दा इस्तेमाल करदे होई इक परीक्षण च कुसै बी तत्व दे मते सारे संभावित रस्ते न. एक्सएसएलटी 1.0 अवमूल्यन मैं शुरू च गै दस्सेआ हा जे क्रोम टीम ब्राउज़र थमां XSLT 1.0 समर्थन गी हटाने दी योजना बना करदी ऐ। एह् इसलेई जरूरी ऐ की जे XSLT 1.0 दस्तावेज रूपांतरण आस्तै XML-केंद्रित प्रोग्रामिंग दा उपयोग करदा ऐ जेह् ड़ा, बदले च, XPath 1.0 पर निर्भर करदा ऐ, जेह् ड़ा मते सारे ब्राउज़रें च पाया जंदा ऐ। जदूं एह् होग तां अस XPath दा इक मुक्ख घटक खोह् ल्ली लैगे। पर इस तथ्य गी दिक्खदे होई जे एक्सपैथ परीक्षण लिखने आस्तै सच्चें गै शानदार ऐ, मिगी एह् संभावना नेईं लगदी जे समग्र रूप कन्नै एक्सपैथ कुसै बी समें च जल्द गै गायब होई जाग। एह् आखदे होई, मैं दिक्खेआ ऐ जे कुसै फीचर गी लेई जाने पर लोकें गी उस च रुचि होंदी ऐ। ते एह् निश्चत रूप कन्नै सच्च ऐ जेह् ड़ा XSLT 1.0 गी अप्रचलित करने दे मामले च ऐ। हैकर न्यूज़ पर इक पूरी चर्चा होआ करदी ऐ जेह्ड़ी इस निंदा दे खलाफ दलील कन्नै भरोची दी ऐ। पोस्ट अपने आप च XSLT कन्नै ब्लॉगिंग फ्रेमवर्क बनाने दा इक शानदार उदाहरण ऐ। तूंचर्चा गी अपने आपै च पढ़ी सकदे न, पर एह् इस गल्लै च औंदा ऐ जे किस चाल्ली जावास्क्रिप्ट दा इस्तेमाल उनें किस्म दे मामलें गी संभालने आस्तै XLST आस्तै इक शिम दे रूप च कीता जाई सकदा ऐ. मैं एह् बी सुझाऽ दिक्खे न जे ब्राउज़रें गी SaxonJS दा इस्तेमाल करना चाहिदा, जेह् ड़ा जावास्क्रिप्ट दे Saxon XSLT, XQUERY, ते XPath इंजनें दा इक पोर्ट ऐ. एह् इक दिलचस्प विचार ऐ, खास करियै की जे सैक्सन-जेएस इनें विनिर्देशें दे मौजूदा संस्करण गी लागू करदा ऐ, जिसलै के कोई बी ब्राउज़र नेईं ऐ जेह् ड़ा 1.0 थमां परे XPath जां XSLT दा कुसै बी संस्करण गी लागू करदा ऐ, ते कोई बी नेईं ऐ जेह् ड़ा XQuery गी लागू करदा ऐ. मैं सैक्सनजेएस ते सैक्सन इंजन दे होर संस्करणें दे पिच्छे दी कंपनी सैक्सनिका च नॉर्म टोवे-वाल्श कोल पुज्जेआ। उने आख्या: “जेकर कोई बी ब्राउज़र विक्रेता आधुनिक एक्सएमएल तकनीकें गी ब्राउज़र च इकट्ठा करने आस्तै इक शुरुआती बिंदु दे रूप च सैक्सनजेएस गी लैने च रुचि रखदा हा तां अस उंदे कन्नै इस बारै चर्चा करने लेई रोमांचित होगे।”— नॉर्म टोवे-वाल्श
पर एह् बी जोड़ेआ गेआ: "मेरा बड़ा हैरानी होग जेकर कुसै ने सोचेआ जे सैक्सनजेएस गी अपने मौजूदा रूप च लैना ते इसगी ब्राउज़र बिल्ड च अपरिवर्तित छोड़ना आदर्श तरीका होग। इक ब्राउज़र विक्रेता, इस तथ्य दी प्रकृति दे मताबक जे ओह् ब्राउज़र बनांदे न, इकीकरण गी उस थमां मते गहरे स्तर पर पेश करी सकदा ऐ जित्थै अस ‘बाहर थमां’ करी सकने आं। "— नॉर्म टोवे-वाल्श
ध्यान देने आह् ला ऐ जे टोवे-वाल्श दी टिप्पणी एक्सएसएलटी दी अवमूल्यन दी घोशणा थमां कोई इक हफ्ते पैह् ले आई ही। निष्कर्ष निकालना मैं होर वी जा सकदा सी। पर मेद ऐ जे इस कन्नै एक्सपैथ दी शक्ति दा प्रदर्शन होई ऐ ते तुसेंगी मते सारे उदाहरण दित्ते गे न जेह् ड़े एह् दस्सदे न जे इसदा इस्तेमाल बड्डे-बड्डे कम्में गी हासल करने आस्तै किस चाल्ली कीता जा। एह् ब्राउज़र स्टैक च पुरानी तकनीक दा इक सराह्ना उदाहरण ऐ जेह् ड़ी अज्ज बी मती उपयोगिता ऐ, भलेआं तुसें कदें बी पता नेईं हा जे एह् मौजूद ऐ जां कदें बी इसदे कोल पुज्जने पर विचार नेईं कीता ऐ। अग्गें पढ़ना
"प्राकृतिक भाशा कन्नै स्वचालित वेब परीक्षणें दी लचीलापन बधाना" (एसीएम डिजिटल लाइब्रेरी) मरौन आयली, यूसुफ बकौनी, नादर जल्लौल, ते रीमा किलानी आसेआएह् लेख लचीले परीक्षण लिखने आस्तै मते सारे एक्सपैथ उदाहरण दिंदा ऐ। XPath (MDN)जेकर तुस XPath किस चाल्ली कम्म करदा ऐ इसदा ब्यौरा देने आह् ली तकनीकी व्याख्या चांह् दे ओ तां एह् शुरू करने आस्तै इक शानदार थाह् र ऐ. XPath ट्यूटोरियल (ZVON)मैं इस ट्यूटोरियल गी अपनी सिखलाई च सारें शा मता मददगार पाया ऐ, उदाहरणें ते साफ-सुथरे व्याख्याएं दे खजाने दे बदौलत। XPatherएह् इंटरएक्टिव टूल तुसेंगी कोड कन्नै सीधे कम्म करने दी अनुमति दिंदा ऐ।
