Case insensitive jQuery attribute selector

JavascriptJqueryJquery Selectors

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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/

Solution 2 - Javascript

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.

Solution 3 - Javascript

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...

Solution 4 - Javascript

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

Solution 5 - Javascript

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;
	}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiongshafferView Question on Stackoverflow
Solution 1 - JavascriptaraneaeView Answer on Stackoverflow
Solution 2 - JavascriptBojanglesView Answer on Stackoverflow
Solution 3 - JavascriptJuvilView Answer on Stackoverflow
Solution 4 - JavascriptUmesh PatilView Answer on Stackoverflow
Solution 5 - JavascriptS.shaikhView Answer on Stackoverflow