jQuery के चयनकर्ता नियमित अभिव्यक्ति


580

मैं एक jQuery चयनकर्ता के साथ वाइल्डकार्ड या नियमित अभिव्यक्तियों (सटीक शब्दावली पर निश्चित नहीं) का उपयोग करने के लिए प्रलेखन के बाद हूं।

मैंने स्वयं इसकी तलाश की है, लेकिन सिंटैक्स पर जानकारी और इसका उपयोग करने के तरीके के बारे में जानने में असमर्थ रहा हूं। क्या किसी को पता है कि सिंटैक्स के लिए प्रलेखन कहाँ है?

संपादित करें: विशेषता फ़िल्टर आपको एक विशेषता मान के पैटर्न के आधार पर चयन करने की अनुमति देते हैं।

जवाबों:


339

जेम्स पडॉल्से ने एक अद्भुत फिल्टर बनाया जो चयन के लिए रेगेक्स का उपयोग करने की अनुमति देता है।

कहो कि आपके पास निम्नलिखित हैं div:

<div class="asdf">

Padolsey का :regexफ़िल्टर इसे इस तरह से चुन सकता है:

$("div:regex(class, .*sd.*)")

इसके अलावा, चयनकर्ताओं पर आधिकारिक दस्तावेज देखें


3
ठीक है। मैं वहाँ गया था, लेकिन मैं वास्तव में उस चीज़ का नाम नहीं जानता था जिसकी मुझे तलाश थी। Ive का एक और रूप था और विशेषता फ़िल्टर का उपयोग करना जो मैं बाद में था।
जोएल कनिंघम

@Padolsey द्वारा regex चयनकर्ता महान काम करता है। यहां एक उदाहरण है जहां आप पाठ, फ़ाइल और चेकबॉक्स इनपुट फ़ील्ड या इसके साथ textareas पर पुनरावृति कर सकते हैं: $ j ('इनपुट: regex (प्रकार, पाठ | फ़ाइल | चेकबॉक्स), textarea')। प्रत्येक (फ़ंक्शन (सूचकांक) // ...});
मैट सेटर

13
नीक से नीचे का उत्तर स्वीकार किया जाना चाहिए। यदि आप इस उत्तर को पढ़ रहे हैं, तो यह अवश्य पढ़ें कि एक!
क्वेंटिन स्कोसेन

5
मुझे त्रुटि मिल रही है: सिंटैक्स त्रुटि, अपरिचित अभिव्यक्ति: असमर्थित छद्म: regex
ryan2johnson9

2
-1। इसे लागू करने के लिए कोड उत्तर में शामिल नहीं है और लिंक सड़ने के लिए अतिसंवेदनशील है। इसके अतिरिक्त, मुझे कोड का परीक्षण करते समय दो कीड़े मिले - यह नियमित अभिव्यक्तियों से युक्त कॉमा को छोड़ देगा ( matchParams.join('')जिनके साथ प्रतिस्थापित करके हल किया गया होगा matchParams.join(',')), और कोई भी पैटर्न जो क्रमशः मेल खाता है 'undefined'या 'null'मेल खाएगा undefinedऔर null। यह दूसरा बग हल किया जा सकता है कि जाँच की !== undefinedऔर !== nullपहले मान । किसी भी तरह से, एक समारोह में गुजरना .filter()आसान है और मेरे लिए क्लीनर / अधिक पठनीय लगता है।
जेम्स टी

732

आप filterअधिक जटिल रीगेक्स मिलान को लागू करने के लिए फ़ंक्शन का उपयोग कर सकते हैं ।

यहां एक उदाहरण दिया गया है जो सिर्फ पहले तीन डिवीजनों से मेल खाएगा:

$('div')
  .filter(function() {
    return this.id.match(/abc+d/);
  })
  .html("Matched!");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="abcd">Not matched</div>
<div id="abccd">Not matched</div>
<div id="abcccd">Not matched</div>
<div id="abd">Not matched</div>


मिलान के स्थान पर चर का उपयोग कैसे करें (/ abc + d /); ?
ससी वरना कुमार

2
@ शिवशंकरकुमार इस सवाल का जवाब यहां
फेलिप माया

283

ये मददगार हो सकते हैं।

यदि आप इसमें शामिल हैं तो यह इस तरह होगा

    $("input[id*='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

यदि आप प्रारंभ के साथ पा रहे हैं तो यह इस तरह होगा

    $("input[id^='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

यदि आप एंड्स के साथ खोज रहे हैं तो यह इस तरह होगा

     $("input[id$='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

यदि आप उन एलिमेंट्स का चयन करना चाहते हैं जो आईडी दिए गए स्ट्रिंग नहीं हैं

    $("input[id!='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

यदि आप ऐसे तत्वों का चयन करना चाहते हैं जिनमें किसी दिए गए शब्द में रिक्त स्थान द्वारा सीमांकित शब्द है

     $("input[name~='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

यदि आप ऐसे तत्वों का चयन करना चाहते हैं जो किसी दिए गए स्ट्रिंग के बराबर है या उस स्ट्रिंग से शुरू करना है जिसके बाद एक हाइफ़न है

     $("input[id|='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

3
महान उत्तर, लेकिन idएस, पहचानकर्ता होने के नाते, इसमें कोई स्थान नहीं हो सकता है , ~=उदाहरण को कुछ और के लिए बदलना चाहिए, जैसे class, जो पहचानकर्ताओं की एक सफेद-अंतरिक्ष सीमांकित सूची है। ऐसी चीजें classहैं जो ~=विशेषता चयनकर्ता के लिए थी।
बेकार कोड

49

यदि आपकी अभिव्यक्ति का नियमित उपयोग परीक्षण के लिए सीमित है यदि एक निश्चित स्ट्रिंग के साथ शुरू होता है, तो आप ^JQuery चयनकर्ता का उपयोग कर सकते हैं ।

उदाहरण के लिए यदि आपका आईडी केवल "एबीसी" से शुरू होने के साथ डिव का चयन करना है, तो आप उपयोग कर सकते हैं:

$("div[id^='abc']")

रेगेक्स के उपयोग से बचने के लिए बहुत उपयोगी चयनकर्ता यहां पाए जा सकते हैं: http://api.jquery.com/category/selectors/attribute-selectors/


यह केस असंवेदनशील मिलान आवश्यकताओं के लिए काम नहीं करेगा। .Filter फंक्शन बेहतर तरीके से उन जरूरतों को पूरा करता है।
ब्रेनडोंव

2
यह मेरे लिए अच्छा था, मैं सिर्फ यह देखना चाहता था कि क्या इनपुट आईडी के अंत में एक '__destroy' था इसलिए मैंने *=इस तरह का इस्तेमाल किया :$("input[id*='__destroy'][value='true']")
ryan2johnson9


8

एक jQuery फ़ंक्शन जोड़ें,

(function($){
    $.fn.regex = function(pattern, fn, fn_a){
        var fn = fn || $.fn.text;
        return this.filter(function() {
            return pattern.test(fn.apply($(this), fn_a));
        });
    };
})(jQuery);

फिर,

$('span').regex(/Sent/)

पाठ मिलान / भेजे गए / के साथ सभी अवधि तत्वों का चयन करेगा।

$('span').regex(/tooltip.year/, $.fn.attr, ['class'])

अपनी कक्षाओं के साथ सभी स्पैन तत्वों का चयन करेंगे /tooltip.year/।


7

आईडी और कक्षाएं अभी भी विशेषता हैं, इसलिए यदि आप तदनुसार चुनते हैं, तो आप उनके लिए एक रेग्जैक्स विशेषता फ़िल्टर लागू कर सकते हैं। यहाँ और पढ़ें: http://rosshawkins.net/archive/2011/10/14/jquery-wildcard-selectors-some-simple-examples.aspx



2

मैं सिर्फ अपना वास्तविक समय उदाहरण दे रहा हूं:

मूल जावास्क्रिप्ट में मैंने आईडी के साथ तत्वों को खोजने के लिए स्निपेट का उपयोग किया, जो कि "select2-qownerName_select-result" से शुरू होता है।

document.querySelectorAll("[id^='select2-qownerName_select-result']");

जब हम जावास्क्रिप्ट से jQuery में स्थानांतरित हो गए तो हमने स्निपेट से ऊपर का स्थान ले लिया है जिसमें तर्क को परेशान किए बिना कम कोड परिवर्तन शामिल हैं।

$("[id^='select2-qownerName_select-result']")


केवल विकल्प मुझे jQuery के बिना मिला, और सबसे कुशल एक। धन्यवाद!
गगनमार 12:24

1

यदि आप ऐसे तत्वों का चयन करना चाहते हैं जिनमें दिए गए तार शामिल हैं तो आप निम्नलिखित चयनकर्ता का उपयोग कर सकते हैं:

$(':contains("search string")')

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