jQuery selector นิพจน์ทั่วไป

ฉันหลังจากใช้เอกสารในการใช้ไวด์การ์ดหรือนิพจน์ปกติ (ไม่แน่ใจในคำศัพท์ที่แน่นอน) ด้วยตัวเลือก jQuery

ฉันค้นหาด้วยตัวเอง แต่ไม่สามารถค้นหาข้อมูลเกี่ยวกับไวยากรณ์และวิธีใช้งานได้ ไม่มีใครทราบว่าเอกสารสำหรับไวยากรณ์อยู่ที่ไหน

แก้ไข: ตัวกรองคุณลักษณะช่วยให้คุณเลือกตามรูปแบบของค่าคุณลักษณะ

James Padolsey สร้างตัวกรองที่ยอดเยี่ยมที่อนุญาตให้ใช้ regex สำหรับการเลือก

สมมติว่าคุณมีดังต่อไปนี้div:

<div class="asdf">

:regexตัวกรองของ Padolsey สามารถเลือกได้ดังนี้:

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

นอกจากนี้ยังตรวจสอบเอกสารอย่างเป็นทางการในตัวเลือก

คุณสามารถใช้filterฟังก์ชันเพื่อใช้การจับคู่ regex ที่ซับซ้อนมากขึ้น

นี่คือตัวอย่างที่เพิ่งจะจับคู่สาม divs แรก:

$('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>

สิ่งเหล่านี้มีประโยชน์

หากคุณกำลังหาโดยมีแล้วมันจะเป็นอย่างนี้

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

หากคุณกำลังค้นหาด้วยStarts Withก็จะเป็นเช่นนี้

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

หากคุณกำลังค้นหาด้วยEnds Withก็จะเป็นเช่นนี้

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

หากคุณต้องการเลือกองค์ประกอบที่id ไม่ใช่สตริงที่กำหนด

    $("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
     });

หากคุณต้องการเลือกองค์ประกอบที่id เท่ากับสตริงที่กำหนดหรือเริ่มต้นด้วยสตริงนั้นตามด้วยยัติภังค์

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

หากการใช้นิพจน์ทั่วไปของคุณถูก จำกัด เพื่อทดสอบว่าการเริ่มต้นที่เกี่ยวข้องกับสตริงที่แน่นอนคุณสามารถใช้^ตัวเลือก JQuery

ตัวอย่างเช่นหากคุณต้องการเลือก div ด้วยรหัสที่ขึ้นต้นด้วย "abc" เท่านั้นคุณสามารถใช้:

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

มีตัวเลือกที่มีประโยชน์มากมายที่จะหลีกเลี่ยงการใช้ regex ได้ที่นี่: http://api.jquery.com/category/selectors/attribute-selectors/

var test = $('#id').attr('value').match(/[^a-z0-9 ]+/);

ไปเลย!

เพิ่มฟังก์ชั่น 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/

รหัสและคลาสยังคงเป็นแอตทริบิวต์ดังนั้นคุณสามารถใช้ตัวกรองแอททริบิวต์ regexp กับพวกเขาหากคุณเลือก อ่านเพิ่มเติมได้ที่นี่: http://rosshawkins.net/archive/2011/10/14/jquery-wildcard-selectors-some-simple-examples.aspx

$("input[name='option[colour]'] :checked ")

ฉันแค่ยกตัวอย่างตามเวลาจริง:

ในจาวาสคริปต์ดั้งเดิมฉันใช้ตัวอย่างต่อไปนี้เพื่อค้นหาองค์ประกอบที่มีรหัสเริ่มต้นด้วย "select2-qownerName_select-result"

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

เมื่อเราเปลี่ยนจาก javascript เป็น jQuery เราได้แทนที่ส่วนย่อยด้วยตัวอย่างต่อไปนี้ซึ่งเกี่ยวข้องกับการเปลี่ยนแปลงรหัสน้อยโดยไม่รบกวนตรรกะ

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

หากคุณต้องการเลือกองค์ประกอบที่มีสตริงที่กำหนดคุณสามารถใช้ตัวเลือกต่อไปนี้:

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