Back to: jQuery Tutorials
jQuery Case Insensitive Attribute Value Selector with Examples
In this article, I am going to discuss jQuery Case Insensitive Attribute Value Selector with Examples. Please read our previous article, where we discussed jQuery Attribute Value Selector. At the end of this article, you will understand everything about the jQuery Case Insensitive Attribute Selector.
jQuery Case Insensitive Attribute Value Selector
jQuery attribute value selectors are generally case-sensitive. But we have certain steps to follow to make these attribute value selectors case-insensitive. Let us see how to do this by practical example.
Example:
In the below example, notice that all the div elements have the title attribute value mysample but the casing is different. In our jQuery code, our selector is matching with only the 1st div element so that is only targeted here.
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Case Insensitive Attribute Value Selector</h3> <section> <div title="MySample">This is text one</div> <div title="MYSAMPLE">This is text two</div> <div title="mysample">This is text three</div> </section> <button id="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('#demo').click(function () { $( 'div[title = "MySample"]' ).css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML code, then click on the Click Me button and you should get the following output.
How to make the jQuery attribute value selector case-insensitive?
Now let’s see how to make the jQuery attribute value selector case-insensitive. We are going to change the previous example to make the jQuery attribute value selector case-insensitive. In the below example, $(‘div[title]’) will return a collection of all div elements having the attribute title. Now from that collection, we have to find out those div elements which have the title attribute value ‘mysample’ irrespective of the case. We are now using the filter method and for each div element in that collection, we are retrieving the attribute value, converting them to lower case using the toLowerCase built-in method, and comparing them to ‘mysample’. Now this will work as case insensitive.
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Case Insensitive Attribute Value Selector</h3> <section> <div title="MySample">This is text one</div> </br> <div title="MYSAMPLE">This is text two</div> </br> <div title="mysample">This is text three</div> </br> </section> <button id="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('#demo').click(function () { $( 'div[title]' ).filter(function(){ return $(this).attr('title').toLowerCase()== 'mysample'; }).css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML Code, then click on the Click Me button and you should get the following output as expected.
Example: jQuery attribute contains selector
In the below example, notice that all the div elements have the title attribute value containing substring ‘div’ but the casing is different. In our jQuery code, our selector is matching with only the 1st div element so that is only targeted here.
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Case Insensitive Attribute Value Selector</h3> <section> <div title="DivSample">This is text one</div> </br> <div title="DIVSample">This is text two</div> </br> <div title="divSample">This is text three</div> </br> </section> <button id="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('#demo').click(function () { $( 'div[title *="Div"]' ).css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
How to make the jQuery attribute contains selector case-insensitive?
Now let’s see how to make the jQuery attribute contains selector case-insensitive. Please have a look at the below example. Here, $(‘div[title]’) will return a collection of all div elements having the attribute title. Now from that collection we have to find out those div elements which have title attribute value containing the substring ‘div’ irrespective of the case. For that, we are using RegEx of JavaScript (Our RegEx is /Div/i. For case-insensitivity we are using this ‘i’ flag). Now for each div element in that collection, we are retrieving the attribute value and comparing it with the RegEx. Now this will work as case-insensitive.
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Case Insensitive Attribute Value Selector</h3> <section> <div title="DivSample">This is text one</div> </br> <div title="DIVSample">This is text two</div> </br> <div title="divSample">This is text three</div> </br> </section> <button id="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('#demo').click(function () { $( 'div[title]' ).filter(function () { return (/Div/i).test($(this).attr('title')); }) .css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML Code and then click on the Click Me button and you should get the following output.
Example:
Now, this thing can be achieved in a much simpler way. In the below example we are using the I flag to the title attribute value in the selector so that the search becomes case insensitive. Notice that all the div elements are targeted irrespective of the case
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Atrribute Value Case Insensitive Selector</h3> <section> <div title="MySample">This is text one</div> </br> <div title="MYSAMPLE">This is text two</div> </br> <div title="mysample">This is text three</div> </br> </section> <button class="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('.demo').click(function () { $('div[title ="MySample" i]').css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML Code and then click on the Click Me button and you should get the following output as expected.
Example:
Now we will see the case of the attribute contains selector. In the below example, we are using the I flag to the title attribute value in the selector so that the search becomes case insensitive. Notice that all the div elements are targeted irrespective of the case.
<!DOCTYPE html> <html> <head> <title>jQuery Case Insensitive Attribute Value Selector</title> </head> <body> <h3>jQuery Atrribute Value Case Insensitive Selector</h3> <section> <div title="DivSample">This is text one</div> </br> <div title="DIVSample">This is text two</div> </br> <div title="divSample">This is text three</div> </br> </section> <button class="demo">Click Me</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function () { $('.demo').click(function () { $( 'div[title *="Div" i]' ).css('border','2px solid red'); }); }); </script> </body> </html>
Run the above HTML Code and then click on the Click Me button and you should get the following output as expected.
In the next article, we will discuss jQuery input vs :input selector i.e. the difference between jQuery $(input) and $(:input) selectors. Here, in this article, I try to explain jQuery Case Insensitive Attribute Value Selector with Examples and I hope you enjoy this jQuery Case Insensitive Attribute Value Selector article.