Case insensitive jQuery attribute selector

Question

I am doing the following using attribute contains selector $('[attribute*=value]')

<input name="man-news">
<input name="milkMan">

<script>    
    $( "input[name*='man']").css("background-color:black");
</script>

This works for the 1st input but not the second input as "Man" has a capital "M"

How can I make $( "input[name*='man']") an case insensitive selector?

possible duplicate of [CSS selector case insensitive for attributes](http://stackoverflow.com/questions/5671238/css-selector-case-insensitive-for-attributes) — falinsky, Oct 19 '13 at 10:47
Possible duplicate of [Case-insensitive attribute-value selector with Jquery](http://stackoverflow.com/questions/5755722/case-insensitive-attribute-value-selector-with-jquery) — 200_success, Nov 11 '15 at 17:03

score 75 · Answer 1 · answered Aug 12 '16 at 17:01

75

The simplest way to do this is to add a case insensitivity flag 'i' inside the regex part of the selector:

So instead of

$( "input[name*='man']")

You could do

$( "input[name*='man' i]")

JS fiddle: https://jsfiddle.net/uoxvwxd1/3/

answered Aug 12 '16 at 17:01

araneae

1,365
2
11
13

12

FYI: Works in Chrome 53, but not IE 11, so interesting, but not ideal – Stan Sep 15 '16 at 19:08
1

@Stan That blows my mind. I was seeing different results in Chrome and IE11, and thought that couldn't be; there must be some other difference. Then I saw your comment. I thought the whole point of jQuery was browser independence. I'd especially expect this to be true when it comes to internals like selector syntax. Any ideas on why this difference exists or if/where it's documented? – BlueMonkMN Oct 09 '17 at 15:37
@BlueMonkMN Its been a year and I have not retested, but my guess would be it is IE's REGEX handling that is to blame for the difference. – Stan Oct 10 '17 at 16:00
1

This solution looks light but it gives in my case: jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [name*='fund' i] – Yazid Erman Feb 25 '18 at 11:53
Also, see the MDN docs regarding attribute selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – M_Willett Mar 08 '18 at 11:38
here is jquery link for above code to get work https://code.jquery.com/jquery-git.js – Wasim A. Mar 14 '18 at 16:46

score 38 · Accepted Answer · answered Oct 19 '13 at 10:47

You can always use .filter():

var mans = $('input').filter(function() {
    return $(this).attr('name').toLowerCase().indexOf('man') > -1;
});

mans.css('background-color', 'black');

The key part here is toLowerCase() which lowercases the name attribute, allowing you to test it for containing man.

score 1 · Answer 3 · answered Feb 28 '14 at 03:41

var control = $('input').filter(function() {
    return /*REGEX_VALUE*/i.test($(this).attr('id'));
});

*REGEX_VALUE* - the value you want to find

I ended up using regex to validate whether the attribute 'ID' satisfy... regex is much more flexible if you want to find a certain matching value or values, case sensitive or insensitive or a certain range of values...

score 1 · Answer 4 · edited Sep 25 '19 at 13:03

I was just able to ignore jQuery's case sensitivity altogether to achieve what I want using below code,

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

You can use this link to find code based on your jQuery versions, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Also there is an article where it does to many good things with jQuery: http://www.ultechspot.com/jquery/using-jquery-search-html-text-and-show-or-hide-accordingly

score 0 · Answer 5 · answered Dec 01 '17 at 12:16

This works for me using jQuery and if i'm adding item to a table

    // check if item already exists in table
    var inputValue = $('#input').val(); // input
    var checkitem = $('#exampleTable td.value div.editable').filter(function() {

        //check each table's editable div matches the input value in lowercase 
        if ($(this).text().toLowerCase() === inputValue.toLowerCase()) {
            itemexists = true; 
        }   
    });

    if (itemexists) {
        alert("item exists in the table");
        return;
    }

Case insensitive jQuery attribute selector

5 Answers5

Linked

Related