Có một trường hợp không nhạy cảm jQuery: chứa bộ chọn?

Có phiên bản không nhạy cảm của trường hợp : chứa bộ chọn jQuery hay tôi nên thực hiện công việc theo cách thủ công bằng cách lặp qua tất cả các phần tử và so sánh .text () của chúng với chuỗi của tôi?

Những gì tôi đã làm cho jQuery 1.2 là:

jQuery.extend(
    jQuery.expr[':'], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

Điều này sẽ mở rộng jquery để có: Chứa bộ chọn không phân biệt chữ hoa chữ thường, phần: chứa bộ chọn không thay đổi.

Chỉnh sửa: Đối với jQuery 1.3 (cảm ơn @ user95227) và sau này bạn cần

jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

Chỉnh sửa: Rõ ràng truy cập DOM trực tiếp bằng cách sử dụng

(a.textContent || a.innerText || "") 

thay vì

jQuery(a).text()

Trong biểu thức trước tăng tốc đáng kể, vì vậy hãy tự chịu rủi ro nếu tốc độ là một vấn đề. (xem câu hỏi của @ John )

Chỉnh sửa mới nhất: Đối với jQuery 1.8, nó phải là:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Để làm cho tùy chọn không phân biệt chữ hoa chữ thường: http://bugs.jquery.com/ticket/278

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

sau đó sử dụng :containsithay vì:contains

Kể từ jQuery 1.3, phương thức này không được dùng nữa. Để làm việc này, nó cần được định nghĩa là một hàm:

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

Nếu ai đó (như tôi) quan tâm thì a và m [3] nghĩa là gì trong định nghĩa Chứa .

KEY / LEGEND: Params được jQuery cung cấp để sử dụng trong các định nghĩa của bộ chọn:

r = jQuery mảng các phần tử đang được xem xét kỹ lưỡng. (ví dụ: r.length = Số phần tử)

i = chỉ số của phần tử hiện đang được xem xét kỹ lưỡng, trong mảng r .

a = phần tử hiện đang được xem xét kỹ lưỡng. Câu lệnh chọn phải trả về true để đưa nó vào kết quả khớp.

m [2] = nodeName hoặc * mà chúng tôi đang tìm kiếm (bên trái dấu hai chấm).

m [3] = param được truyền vào: bộ chọn (param). Thông thường, một số chỉ mục, như trong : nth-of-type (5) hoặc một chuỗi, như trong : color (blue) .

Trong jQuery 1.8, bạn sẽ cần sử dụng

jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {                                                                                                                                                                
    return function (elem) {                                                            
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;        
    };                                                                                  
});

Một biến thể dường như thực hiện nhanh hơn một chút và cũng cho phép các biểu thức thông thường là:

jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //-- faster than jQuery(a).text()
        var sText   = (a.textContent || a.innerText || "");     
        var zRegExp = new RegExp (m[3], 'i');
        return zRegExp.test (sText);
    }
);

Đây không chỉ là trường hợp không nhạy cảm, mà còn cho phép các tìm kiếm mạnh mẽ như:

• $("p:containsCI('\\bup\\b')") (Kết hợp "Lên" hoặc "lên", nhưng không khớp "trên", "đánh thức", v.v.)
• $("p:containsCI('(?:Red|Blue) state')") (Khớp với "trạng thái màu đỏ" hoặc "trạng thái màu xanh", nhưng không khớp với "trạng thái lên", v.v.)
• $("p:containsCI('^\\s*Stocks?')") (Khớp với "stock" hoặc "stock", nhưng chỉ ở đầu đoạn (bỏ qua mọi khoảng trắng hàng đầu).)

Có thể muộn .... nhưng,

Tôi muốn đi theo con đường này ..

$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

Bằng cách này, bạn KHÔNG làm xáo trộn với ' NATIVE ' của jQuery ' ... Bạn có thể cần cái mặc định sau ... nếu bị giả mạo, bạn có thể thấy mình quay lại stackOverFlow ...

jQuery.expr[':'].contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

Mã cập nhật hoạt động tốt trong 1.3, nhưng "chứa" nên viết thường ở chữ cái đầu tiên không giống như ví dụ trước.

Tham khảo bên dưới để sử dụng ": chứa" để tìm văn bản bỏ qua độ nhạy trường hợp của nó từ mã HTML,

 $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });
        $("#searchTextBox").keypress(function() {
          if($("#searchTextBox").val().length > 0){
            $(".rows").css("display","none");
            var userSerarchField = $("#searchTextBox").val();
            $(".rows:contains('"+ userSerarchField +"')").css("display","block");
          } else {
            $(".rows").css("display","block");
          }              
        });

Bạn cũng có thể sử dụng liên kết này để tìm mã bỏ qua trường hợp dựa trên phiên bản jquery của bạn, Tạo jQuery: chứa Case-Insensitive

Một phiên bản nhanh hơn bằng cách sử dụng các biểu thức thông thường.

$.expr[':'].icontains = function(el, i, m) { // checks for substring (case insensitive)
    var search = m[3];
    if (!search) return false;

    var pattern = new RegExp(search, 'i');
    return pattern.test($(el).text());
};

Tôi đã có một vấn đề tương tự với việc sau đây không hoạt động ...

// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');

Điều này hoạt động và không cần gia hạn

$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');

Điều này cũng hoạt động, nhưng có lẽ rơi vào loại "vòng lặp thủ công" ....

$('div.story span.Quality').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');

Một biến mới tôi đặt tên là subString và đặt chuỗi bạn muốn tìm kiếm trong một số thành phần văn bản. Sau đó, sử dụng bộ chọn Jquery chọn các yếu tố bạn cần như ví dụ của tôi $("elementsYouNeed")và lọc theo .filter(). Trong .filter()đó sẽ so sánh từng yếu tố trong$("elementsYouNeed") với chức năng.

Trong hàm i sử dụng .toLowerCase()cho văn bản phần tử cũng subString có thể tránh trường hợp phân biệt chữ hoa chữ thường và kiểm tra xem có một SubString nào trong đó không. Sau đó.filter() phương thức xây dựng một đối tượng jQuery mới từ một tập hợp con của các phần tử phù hợp.

Bây giờ bạn có thể lấy các phần tử khớp trong matchObjects và làm bất cứ điều gì bạn muốn.

var subString ="string you want to match".toLowerCase();

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});