【JavaScript】CSSで特定の文字が入った段落を非表示にしたい

JavaScript(ジャバスクリプト)

2024.01.12

特定の文字が入った段落を非表示にしたい
CSS部分
HTML部分
querySelectorAll・includesメソッド
まとめ
1. 共有:
2. いいね:

特定の文字が入った段落を非表示にしたい

段落を非表示にするにはCSSのセレクタで可能ですが、クラス名や指定する場所が決まっていない場合に「特定の文字が入った段落を非表示にしたい」といった場合に困ったことになります。代替手段としてJavaScriptを使用してこれを達成することができます。

以下は、JavaScriptを使用して特定の文字が入った段落を非表示にする例です。

CSS部分

CSSコード display: none; は、HTML内の特定の要素を非表示にするために使用されます。この場合、.hidden-paragraph クラスは以下のように動作します。

    .hidden-paragraph {
      display: none;
    }

このCSSルールは、.hidden-paragraph クラスが適用されたすべてのHTML要素を非表示にします。この場合、あなたがHTMLコードの中で、特定の文字が入った段落は非表示にされます。 という段落が、このCSSルールによって画面上から非表示になります。その結果、この段落はユーザーには見えなくなります。

HTML部分

このコードは、特定の条件（この場合は “hidden-paragraph” クラスが適用された場合）に基づいて、特定の段落を非表示にする方法を示しています。

  <p>これは表示される段落です。</p>
  <p class="hidden-paragraph">特定の文字が入った段落は非表示にされます。</p>
  <p>これも表示される段落です。</p>

最初の段落（タグ）には「これは表示される段落です。」と書かれており、直訳すると「これは表示される段落です。」となります。
二番目の段落（タグ）には「特定の文字が入った段落は非表示にされます。」と書かれており、「特定の文字が含まれている段落は非表示になります。」という意味です。この段落にはCSSクラス “hidden-paragraph” が指定されており、これはおそらくスタイルシートによって非表示に設定されていることを意味します。
三番目の段落（もう一つのタグ）には「これも表示される段落です。」と書かれており、「これも表示される段落です。」という意味です。

querySelectorAll・includesメソッド

この例では、JavaScriptでページが読み込まれた際に、querySelectorAllを使用してすべての要素を取得し、それぞれの段落のテキストコンテンツに特定の文字が含まれているかを確認します。

    document.addEventListener("DOMContentLoaded", function() {
      var paragraphs = document.querySelectorAll("p");

      paragraphs.forEach(function(paragraph) {
        if (paragraph.textContent.includes("特定の文字")) {
          paragraph.classList.add("hidden-paragraph");
        }
      });
    });

含まれている場合は、その段落にhidden-paragraphクラスを追加して非表示にします。