如何为 :contains 使用变量而不是 class？

Question

我希望能够得到 .testClass 的小写字母。我该怎么做？

$("#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

如果您想在字符串中查找单词，您可以考虑制作自己的搜索功能。查看以下示例。

$(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>

这将突出显示包含该词的段落。

如何为 :contains 使用变量而不是 class？

How to use variable instead of class for :contains?

html

variables

jquery

contains