:contains()

jQuery Reference

:contains("문자열")은 지정한 문자열을 텍스트에 포함한 요소를 선택합니다. 대소문자를 구분하고 자식 요소의 텍스트도 검사하므로, 정확히 일치하는 문단만 찾는 선택자와는 다릅니다.

문법과 적용 범위

$('p:contains("안내")');
$("#messages p").filter(':contains("jb")');

태그 사이에 보이는 텍스트가 검사 대상이며 input의 value나 이미지의 alt를 검색하는 기능은 아닙니다. 부분 문자열이 일치하면 선택되므로 jbdui도 jb 검색에 포함됩니다. 부모와 자식을 모두 대상으로 삼으면 같은 문자열을 가진 여러 단계의 요소가 선택될 수 있습니다. 이 선택자는 jQuery 확장이며 표준 CSS 선택자 API에서 사용할 수 없습니다.

jQuery 공식 문서의 :contains() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery contains-selector 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="messages">
  <p id="a">일반 문단</p>
  <p id="b">jb 안내</p>
  <p id="c">JB 안내</p>
  <p id="d">문자열 jbdui</p>
  <p id="e"><span>jb</span> 포함 문단</p>
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $found = $("#messages p").filter(':contains("jb")');
      $found.addClass("marked");
      $("#output").text($found.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

실행 결과 확인

b, d, e가 강조되고 결과는 b, d, e입니다. c의 대문자 JB는 일치하지 않고, e는 span 안에 문자열이 있어도 선택됩니다.

동적인 검색어 비교

const query = "JB".toLocaleLowerCase();
const $found = $("#messages p").filter(function () {
  return $(this).text().toLocaleLowerCase().includes(query);
});

앞의 전체 예제에서 선택 코드 대신 쓰면 b, c, d, e가 선택됩니다. 따옴표를 포함한 검색어도 선택자 문법으로 해석되지 않고 텍스트로 비교됩니다.

사용할 때 주의할 점

정확한 문자열 일치가 필요하면 .filter() 안에서 $(this).text().trim() === 검색어처럼 비교하세요. 표시 공백과 줄바꿈도 결과에 영향을 줍니다.
검색창의 값을 선택자 문자열에 직접 붙이면 따옴표·괄호 때문에 선택자가 깨질 수 있습니다. 동적인 검색어는 함수 안에서 .text().includes()로 비교하는 편이 단순합니다.
대소문자를 무시하려면 검색어와 대상 텍스트를 같은 방식으로 소문자화해 비교해야 합니다. 빈 검색어는 모든 문자열에 포함되므로 별도 처리를 정하세요.

용도를 비교하려면 .find()로 검색 범위 좁히기을 참고하세요.

jQuery Reference