How to use variable instead of class for :contains?

Question

I would like to be able to get the lowercase of .testClass. How could I do that?

$("#testId").on("click", function() {
  var realSearch = "World";
  $(".testClass:contains('" + realSearch + "')").css("background-color", "yellow");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="testId" type="button">Test Me</button>
<p class="testClass">Hello World</p>

Answer 1

If you want to look for a Word in a String, you may consider making your own search function. Review the following example.

$(function() {
  function searchText(text, word) {
    var found = false;
    var regex = new RegExp(word, "i");
    if (text.match(regex) !== null) {
      found = true;
    }
    return found;
  }

  $("#testId").on("click", function() {
    var realSearch = "Porta";
    $(".testClass").each(function(i, elem) {
      if (searchText($(elem).text().toLowerCase(), realSearch)) {
        console.log("Found in P" + i, realSearch);
        $(elem).addClass("highlight");
      } else {
        console.log("Not Found in P" + i, realSearch);
      }
    });
  });
});

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="testId" type="button">Test Me</button>
<p class="testClass">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec enim ac augue tempor dictum sed consequat ante. Phasellus porttitor volutpat arcu et mollis. Fusce feugiat libero in odio bibendum, eget cursus arcu lacinia. Vestibulum ante ipsum primis
  in faucibus orci luctus et ultrices posuere cubilia curae; Mauris erat ligula, tincidunt sed diam eget, pharetra pretium ipsum. Nulla nec risus lectus. Nullam at nulla dolor. Etiam congue vehicula dolor sit amet viverra. Curabitur vel magna laoreet,
  blandit lorem ultricies, lobortis lorem.</p>
<p class="testClass">Sed quis bibendum nibh. Donec imperdiet velit elementum augue condimentum ullamcorper. Phasellus finibus scelerisque massa condimentum eleifend. Proin imperdiet enim id magna accumsan, eget eleifend eros convallis. Phasellus ultrices volutpat efficitur.
  Aliquam in venenatis nibh. Aenean tempor odio sed blandit mollis. Sed posuere fermentum enim pellentesque vestibulum. Aliquam vel lorem imperdiet, dignissim neque eget, posuere turpis. Vestibulum libero lacus, facilisis id mollis vitae, porta eu sem.
  Nulla mattis, ex porta lobortis suscipit, erat purus mattis massa, id dictum nunc dui vel dui.</p>
<p class="testClass">Fusce mattis elit ante, ac dignissim leo venenatis ut. In luctus, libero sit amet aliquam commodo, mauris dolor tincidunt sapien, non dictum ex neque lobortis nibh. Proin vitae maximus ligula. Curabitur pellentesque egestas dolor et molestie. Praesent
  magna mauris, feugiat quis ultrices eget, elementum nec purus. Etiam faucibus vel urna at rhoncus. Duis a scelerisque lorem. Etiam scelerisque, sem in pretium interdum, sem metus vulputate ipsum, et imperdiet sem dui ut augue. Etiam eget ante ut tortor
  suscipit ultrices eu viverra felis. Integer vitae aliquam sapien. Sed feugiat, risus sed posuere faucibus, nisi lectus finibus quam, eu aliquet elit purus sed justo. Phasellus vel mauris ut augue vulputate consequat eget id erat.</p>

This will highlight the paragraph that has the word in it.