JavaScriptのincludes()メソッドで文字列や要素に特定の単語が含まれているか判定する方法

JavaScriptで特定の単語が含まれているか確認するには？

JavaScriptで文字列に特定の単語（文字列値）が含まれているかどうかを調べたいときは、組み込みメソッドの includes() を使います。このメソッドは、対象の文字列の中に探している文字が存在するかどうかを判定し、true または false を返します。

この記事では、HTMLページ内の要素に「JavaScript」という単語が含まれているかを実際にチェックする手順を、コード例とともにわかりやすく解説します。

チェック対象となるHTMLの例

たとえば、次のような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>

ダミーテキスト（Lorem ipsum）の中に「JavaScript」という単語が混ざっています。これをJavaScriptで検出してみましょう。

ステップ1：querySelector()で要素を取得する

まず、探している文字列が含まれていると思われる要素を選択します。この例では <article> 要素です。document.querySelector() を使って以下のように取得できます。

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

ここで innerText プロパティを指定しているのは、「人間が読める形で表示されるテキスト」だけを対象にしたいからです。つまり、画面上に表示されているテキストの中から「JavaScript」という単語を探します。

innerTextとtextContentの違い

<script> や <style> 要素の中も含めて、あらゆるHTML要素内の文字列を検索したい場合は、代わりに textContent プロパティを使用します。

• innerText： 画面に表示されるテキストのみを取得（display: none の要素は除外）
• textContent： 非表示要素やスクリプト・スタイルの中身も含む、すべてのテキストを取得

用途に応じて使い分けることで、意図した通りの検索結果が得られます。

ステップ2：includes()メソッドで判定する

これで、<article> 要素全体のテキストを参照する変数 findJavaScriptString が用意できました。ここに includes() メソッドを適用し、結果をコンソールに出力してみます。

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

すべて正しく実装できていれば、コンソールには true と表示されるはずです。これは、対象のテキストの中に「JavaScript」という単語が確かに含まれていることを意味します。

まとめ

JavaScriptで文字列やHTML要素に特定の単語が含まれているかを確認するには、以下の手順が基本となります。

1. document.querySelector() などで対象の要素を取得する
2. 表示テキストだけなら innerText、すべてのテキストなら textContent を使う
3. includes() メソッドで目的の単語が含まれているか判定する

includes() は大文字・小文字を区別する点にも注意してください。大文字小文字を無視して判定したい場合は、toLowerCase() などで両者を揃えてから比較するとよいでしょう。