jQuery селектор :contains()

Определение и применение

jQuery селектор :contains() выбирает все элементы, которые содержат указанную строку. Строки могут находиться непосредственно в самом элементе, или внутри дочернего элемента.

jQuery синтаксис:

JavaScript

$("selector:contains(text)")

Добавлен в версии jQuery

1.1.4

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

Селектор :contains() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<p>Пить будешь?</p>
<p>- Не буду пить!</p>
<p>А вот это <span style="font-weight: bold">попить</span> хочешь?</p>
<p>- Нет, питька отвалиться.</p>

main.js

JavaScript

$(document).ready(function () {
    $('p:contains(пить)').css('background-color', 'yellow') // выбираем все элементы <p>, которые содержат строку "пить"
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery селектора :contains() мы выбрали и стилизовали все абзацы (элементы <p>), которые содержат в себе строку "пить". Обратите внимание, что был выбран и второй абзац не смотря на то, что искомая строка находится в дочернем элементе. В связи с тем, что поиск чувствителен к регистру, первый абзац не был выбран.