Detailed explanation of jQuery using contains filter to achieve exact matching method

This article describes the method of jQuery using contains filters to achieve exact matching. Share it for your reference, as follows:

:contains Selector selects an element containing the specified string.

The string can be text contained directly in the element, or is contained in a child element.

Often used with other elements/selectors to select elements in the specified group that contain the specified text, such as:

$("p:contains(is)") means selecting all <p> elements containing "is".

Another example:

$("p:contains(Zhang San)") or $("p:contains("Zhang San")") means selecting all <p> elements containing "Zhang San".

Variables can also be used in this selector to achieve the purpose of selection, such as:

$(document).ready(function(){
var ddd="John";
$("div:contains(‘" + ddd + "‘)").css("color", "#f00");
});

We can also use the filter method of jquery and contains method to achieve more fuzzy matching, such as:

$(document).ready(function(){
$(".box").filter(":contains(plum)").css("color", "#f00");
});

Indicates that the text color of the box containing "Li" is set to red.

jQuery uses contains filters to achieve exact matching:

&lt;!DOCTYPE html&gt;
&lt;html xmlns="http:///1999/xhtml"&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;!--&lt;script src="" type="text/javascript"&gt;&lt;/script&gt;--&gt;
  &lt;script src="" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(function () {
      //Execute selection based on the text of option in select      //$("#selectbox option[text='second item']"); //$("#selectbox option").filter("[text='second item']"); //The above two ways of writing are wrong      //Correct writing      $("#btn4").click(function () {
        var $option =$("#selectbox option:contains('second item')").map(function(){          if ($(this).text() == "The Second Item") {
            return this;
          }
        });
        alert($ &gt; 0 ? "There is an object" : "No object");
        $("selected", true);
      });
    });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;form &gt;
  &lt;div&gt;
    &lt;select &gt;
      &lt;option value="1"&gt;Item 1&lt;/option&gt;
      &lt;option value="2"&gt;Item 2&lt;/option&gt;
      &lt;option value="21"&gt;Item 21&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="button"  value="contains test" /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

For more information about jQuery, please visit the special topic of this site:Summary of jQuery drag and drop special effects and skills》、《Summary of jQuery extension skills》、《Summary of common classic effects of jQuery》、《Summary of jQuery animation and special effects usage"and"Summary of jquery selector usage》

I hope this article will be helpful to everyone's jQuery programming.