jQuery :contains selector to search for multiple strings

JqueryJquery SelectorsCss SelectorsContains

Jquery Problem Overview


Assuming i have:

<li id="1">Mary</li>
<li id="2">John, Mary, Dave</li>
<li id="3">John, Dave, Mary</li>
<li id="4">John</li>

If i need to find all <li> Elements which contain "John" and "Mary", how would i construct the jQuery?

A search for a single string seems easy:

$('li:contains("John")').text()

I am looking for something like the following pseudo code:

$('li:contains("John")' && 'li:contains("Mary")').text()

Thanks!

Jquery Solutions


Solution 1 - Jquery

###Answer

To find li's that have text containing BOTH Mary AND John:

$('li:contains("Mary"):contains("John")')

To find li's that have text containing EITHER Mary OR John:

$('li:contains("Mary"), li:contains("John")')

###Explanation

Just think of the :contains as if it was a class declaration, like .class:

$('li.one.two').      // Find <li>'s with classes of BOTH one AND two
$('li.one, li.two').  // Find <li>'s with a class of EITHER one OR two

It's the same with :contains:

$('li:contains("Mary"):contains("John")').      // Both Mary AND John
$('li:contains("Mary"), li:contains("John")').  // Either Mary OR John

###Demo

http://jsbin.com/ejuzi/edit

Solution 2 - Jquery

How about

$('li:contains("John"),li:contains("Mary")')

Solution 3 - Jquery

Answer

The correct syntax would be $("li:contains('John'),li:contains('Mary')").css("color","red")

But I found out that if you had many cases to test, jQuery will perform very badly (especially on IE6, I know, it's old but still in use). So I decided to write my own attribute filter.

This is how to use it: $("li:mcontains('John','Mary')").css("color","red")

Code
jQuery.expr[':'].mcontains = function(obj, index, meta, stack){
    result = false;     
    theList = meta[3].split("','");

    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')

    for (x=0;x<theList.length;x++) {
        if (contents.indexOf(theList[x]) >= 0) {
            return true;
        }
    }

    return false;
};

Solution 4 - Jquery

It's easy:

$("li:contains('John'):contains('Mary')")

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
Questionzıəs uɐɟəʇsView Question on Stackoverflow
Solution 1 - JqueryAdam KissView Answer on Stackoverflow
Solution 2 - JqueryLazarusView Answer on Stackoverflow
Solution 3 - JqueryKristofView Answer on Stackoverflow
Solution 4 - JquerySlavaView Answer on Stackoverflow