スキルアップを始める

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

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

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

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

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

CSS部分

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

    .hidden-paragraph {
      display: none;
    }

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

HTML部分

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

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

querySelectorAll・includesメソッド

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

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

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

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

まとめ

例えば、ワードプレスのショートコードを一時的に非表示にしたいときなどにも便利です。

ご参考ください。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら