Get elements containing text from array

Question

I want to search all the elements containing any string in the array. For example I have following list of items

<ul>
    <li>cricket bat</li>
    <li>tennis ball</li>
    <li>golf ball</li>
    <li>hockey stick</li>
</ul>

and this array

var arr = ['bat', 'ball'];

It should select all the elements having text bat and ball. How can I achieve this using jquery or javascript.

This is what I was trying

filter = 'bat ball';
var lis = row('UL li');
var flag = 0;
for (var i = 0; i < lis.length; i++) {
    var name = lis[i].getElementsByTagName('a')[0].innerHTML;
    if (name.toUpperCase().indexOf(filter) > -1) {
        flag = 1;
    } else {
        lis[i].style.display = 'none';
    }
}

Answer 1

You can use :contains selector.

I think you meant either one of those values, in that case

var arr = ['bat', 'ball'];

var selectors = arr.map(function(val) {
  return ':contains(' + val + ')'
});
var $lis = $('ul li').filter(selectors.join());

$lis.css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>cricket bat</li>
  <li>tennis ball</li>
  <li>golf ball</li>
  <li>hockey stick</li>
</ul>

Answer 2

You can use :contains pseudo-selector:

Select all elements that contain the specified text.

$('li:contains("bat"), li:contains("ball")')

DEMO

Answer 3

Try utilizing .filter(), .match()

var arr = ["bat", "ball"];

var res = Array.prototype.filter.call(document.querySelectorAll("li")
          , function(el, index) {
              return el.textContent.match(new RegExp(arr.join("|"))) !== null
          });
  
console.log(res);

<ul>
    <li>cricket bat</li>
    <li>tennis ball</li>
    <li>golf ball</li>
    <li>hockey stick</li>
</ul>

Answer 4

Try this:

$.each(["bat", "ball"], function (i,val) {
    if ($("ul li:contains(" + val + ")").length) {
        $("ul li:contains(" + val + ")").css('color', 'red')
    }
})

DEMO