JavaScript로 문자열이나 HTML 요소에 특정 단어가 포함되어 있는지 확인하는 방법

JavaScript에서 문자열에 특정 단어가 포함되어 있는지 어떻게 확인할 수 있을까요?

답은 JavaScript에 기본으로 내장된 includes() 메서드입니다. 이 메서드는 문자열 안에 찾고자 하는 특정 문자나 단어가 존재하는지 판별해 줍니다.

확인하고 싶은 예시 살펴보기

예를 들어, 아래와 같은 HTML 페이지에 "JavaScript"라는 단어가 포함되어 있는지 확인하고 싶다고 가정해 보겠습니다.

<article>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis, iure eaque?
    Beatae JavaScript fuga voluptatibus quae dolor odit magni voluptas iusto
    illo blanditiis sed, temporibus harum minima hic quos voluptatem autem!
  </p>
</article>

1단계: 대상 요소 선택하기

JavaScript로 이를 확인하려면 먼저 찾고자 하는 문자열 값(단어)이 들어 있을 것으로 예상되는 요소를 선택해야 합니다. 이번 예시에서는 <article> 요소가 해당됩니다.

const findJavaScriptString = document.querySelector("article").innerText

여기에 innerText 속성을 추가한 이유는, 사람이 화면에서 읽을 수 있는 텍스트(human-readable) 중에서만 "JavaScript"라는 단어를 찾기 위해서입니다.

innerText와 textContent의 차이

그러나 <script>나 <style> 요소를 포함한 모든 HTML 요소에서 문자열 값을 찾아야 한다면, 대신 textContent 속성을 사용해야 합니다. 두 속성의 주요 차이는 다음과 같습니다.

• innerText: 화면에 실제로 렌더링되는 텍스트만 반환하며, 숨겨진 요소의 텍스트는 제외됩니다.
• textContent: 태그 내부의 모든 텍스트 노드를 반환하며, CSS로 숨겨진 내용도 포함됩니다.

2단계: includes() 메서드로 결과 확인하기

이제 lorem ipsum 무의미한 텍스트 사이에 "JavaScript"라는 단어가 포함된 <article> 요소 전체를 참조하는 변수 findJavaScriptString이 준비되었습니다. 여기에 includes() 메서드를 적용하고 결과를 콘솔에 출력해 보겠습니다.

console.log(findJavaScriptString.includes("JavaScript"))
// true

모든 과정을 올바르게 따라 했다면 콘솔에는 true가 출력됩니다. 만약 해당 단어가 없다면 false가 반환됩니다.

참고: 대소문자 구분

includes() 메서드는 대소문자를 엄격하게 구분한다는 점에 유의하세요. 예를 들어 "javascript"로 검색하면 "JavaScript"는 찾지 못합니다. 대소문자 구분 없이 검색하려면 다음과 같이 문자열을 소문자로 변환한 뒤 비교하면 됩니다.

console.log(findJavaScriptString.toLowerCase().includes("javascript"))
// true