JQuery: Make contains case insensitive

Question

I have looked at other solutions to this on this site, but can't see how to adapt for my situation. I have the following code which looks for a label containing 'Size', but it needs to find 'size' too.

    <script type="text/javascript">
        $(document).ready(function() {                                                       

            if ( $('.productOptionsBlock label:contains("Size")').length > 0 ) {
                $('.productOptionsBlock label:contains("Size")').replaceWith('<label>Please select your size:</label>');
            }

        });
    </script>

As a JQuery newby, I can't see how to apply the other functions I've found...

Many thanks,

Andy

Duplicate of: [Is there a case insensitive jQuery :contains selector?](http://stackoverflow.com/q/187537/239241) It was the first result for me on Google for 'jquery contains case insensitive' — betamax, Aug 05 '11 at 14:32

score 4 · Answer 1 · answered Jun 17 '12 at 18:19

Here we are defining our own expression instead of changing system's one with name "contains-ci" (contains which is case-insensitive):

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

Post on my blog where you can find some example which works on top of this expression:

http://blogs.digitss.com/javascript/jquery-javascript/jquery-case-insensitive-contains-expression/

http://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/

score 1 · Accepted Answer · answered Aug 05 '11 at 14:33

1

$.expr[':'].Contains = function(x, y, z){
    return jQuery(x).text().toUpperCase().indexOf(z[3].toUpperCase())>=0;
};

answered Aug 05 '11 at 14:33

Sergey Metlov

25,747
28
93
153

Right.... I think I now understand. I've added this, and I now see how to adapt my code. And it works great. Thanks @DotNET Ninja – AndyiBM Aug 05 '11 at 14:45

score 1 · Answer 3 · answered Aug 05 '11 at 14:36

1

$('.productOptionsBlock label:contains("Size") , .productOptionsBlock label:contains("size")').replaceWith('<label>Please select your size:</label>');

answered Aug 05 '11 at 14:36

Joseph Marikle

76,418
17
112
129

Thanks Joseph - yours is 'specifically' appropriate for my situation, but I think I need to go further and use DotNET Ninja's solution. – AndyiBM Aug 05 '11 at 14:46

JQuery: Make contains case insensitive

3 Answers3