Jquery :contains and making it Case-Insensitive

Well, playing around with jQuery, I once came accross jquery contains(). Very handy selector and easy to use and I have been using this in most of my scripts. So what does :contains do..
jQuery( ":contains(text)" );
Jquery contains selects all elements that contains the specified text.
As the doc say, it selects all the elements which contains the given text. the elements can appear directly within the selected element, in any of that element's descendants, or a combination thereof.
Example 

jQuery



Javascript



PHP



JQUERY
try it in fiddle

The above script, will change the color of "Javascript" and "JQUERY". however, if you notice, the color of "jQuery" is not changed, though it starts with `J`. thus, :contains is case sensitive. The text must have matching case to be selected. What is you need contains with Case-Insensitive.

One way to do this is , extending the old :contains selector. 
   // OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
However, this overwrites the old contains selector.

OR create a New one 
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
Now, you can use :containsIN instead of :contains and get the elements
Try it in Fiddle

Some more example to highlight the cells of table which contains the typed letter in input element.

Comments

  1. UnknownMarch 27, 2014 at 8:37 AM

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

    where to put this code

    ReplyDelete
    Replies
    1. bipenApril 2, 2014 at 10:53 PM

      hello Vivek!

      it is better if you add this to seperate js file , and load it in you html head tag . however adding this code just before your `:contains` selector should work.

      you just have to make sure, the .extend is called before your selector.

      Thanks

      Delete
  2. UnknownApril 21, 2014 at 3:31 AM

    nw i used the program and gt the java case insensitive it is easy to understand
    http://www.besanttechnologies.com

    ReplyDelete
  3. UnknownDecember 2, 2015 at 11:38 PM

    thank you

    ReplyDelete
  4. calanthaueckertFebruary 26, 2022 at 12:56 AM

    Casino Review, Ratings, Games, & Facts
    Casino is a top-notch casino in 암호화폐란 the United States that offers high-quality games, 생활바카라 a vast collection of slot machines, 벳익스플로어 a huge jackpots, and a great  Rating: 3 · 윈 조이 포커 ‎Review by American Gambler bet

    ReplyDelete

Post a Comment

Popular posts from this blog

jquery attr() vs prop() (difference)

according to the docs jQuery.attr() Get the value of an attribute for the first element in the set of matched elements. whereas,  jQuery.prop() Get the value of a property for the first element in the set of matched elements. Before jQuery 1.6 , the attr() method sometimes took property values into account when retrieving some attributes, which caused in inconsistent behavior. And thus, the prop() method was introduced. As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. What actually is Attributes? Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for HTML element and define it while writing the source code. simple example can be: here, "type","value", "id" are attributes of the input elements. What is Property? Property is a representation of an attribute in the HTML DOM tree. on...
Read more

Jquery 'On' (Events,Direct ,Delegated)

jQuery makes it easy to respond to user interaction with a web page. Example, this code listen to click event on all element in a document and alert the text in it. HTML click 1 click 2 JQUERY There are other methods for event binding such as click(), keydown(), keyup(), blur() and so on, all of which make use of jQuery's .on() method. jQuery's .on() method attachs an event handler function for one or more events on selected elements. The example given above is Direct event. which basically means : HEY!!!! I want every div to listen up: when you get clicked , give me alert. Here, each of these div has been individually given click event which works as it should. However  if you notice in jquery's DOC, According to the jquery's documentation: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). so, now what if some of the div is generated dynamically...
Read more

PHP Profiling Using Xdebug and Kcachegrind

Xdebug's Profiler is a powerful tool that gives you the ability to analyze your PHP code and determine bottlenecks or generally see which parts of your code are slow and could use a speed boost. The profiler in Xdebug 2 outputs profiling information in the form of a cachegrind compatible file. This allows you to use the KCacheGrind tool (Linux,) to analyse your profiling data.  Xdebug profiler is incorporated in the Xdebug tool. Therefore you first need to download, install, and enable Xdebug itself and after that enable the profiling functionality within it. Install x-debug through apache sudo apt-get install php5-xdebug Enabling Xdebug integration with the PHP engine Once xdebug is installed, you can enable the xdebug(profiler) to work with PHP by adding following lines at the end of  php.ini  file. [xdebug]   zend_extension= "/usr/lib/php5/20121212/xdebug.so"    ;path to xdebug.so xdeb...
Read more