素のjavaScriptで、特定の名前や接頭辞を含むclassを判定して削除する方法[ js ]

素のjavaScriptで、特定の名前や接頭辞を含むclassを判定して削除する方法[ js ]

<div class="wrapper-target is-first-class is-first-elm is-first-foo is-second">
この要素から特定のclassだけを取り出したい
</div>

↑Webサイトを制作している時。
例えば、このようなhtmlがあったとします。
ここから、特定の名前や接頭辞をもつclassだけを抽出、判定して削除したい場合。今回は、そんな方法の記事です。

かつて、多くのWeb制作者がお世話になったjQueryでは、
上記の様なケースでも比較的簡単に要素を絞り込んで、特定のclassの制御ができたかと思います。

ただし昨今、脱jQueryの流れが進み、
jQueryの使用は極力控えて」だとか。
そもそもjQueryの使用はNG」だとか。
それを使うことができないWeb制作の現場も増えてきた様に感じています。

もし、そんな状況に出くわした場合、どうするのか。

代替手段として確実なのは、単純に、素のjavascriptを使うという事です。
※私の経験上、実際の制作現場でも、よくこの手の「jQuery → 素のjavascriptへの書き換え」のケースと出くわす機会が多くなりました。

では次のセクションから、その方法を書いていきたいと思います。

素のjavascriptをつかった、任意の名前、接頭辞を持つclassの特定

複数のclass名をもつ要素の中から
「特定の名前を頭に持っている(接頭辞を持っている)classだけ」を特定したい。

実は、素のjavascriptでも、
仕組みさえわかってしまえば意外と簡単に、
特定の名前や任意の文字列を含むclassを特定して扱うことができます。

大まかな手順

手順としては
(1). querySelector() で、対象とする任意の文字列を含む要素を取得して、変数に格納します。
※対象が複数の場合は querySelectorAll() を使用して、ページ上の全件を取得します。今回の例は1つの要素が対象ですが、応用することでページ上の複数要素に対しても、同じことが可能です。
(2). (1) で取得した文字列から、探したい文字列を正規表現で match() に渡して、該当する条件に一致する文字列を探します。

上記の(1)、(2)ができれば、あとは対象の要素に対して
classList.remove();
してあげるだけです。

該当のjavascriptコード

const target = document.querySelector('.wrapper-target');
const targetClassList = target.className;

const myRegExp = new RegExp(/\bis-first\S+/, 'g');
const myMatched = targetClassList.match(myRegExp) || [];

for(let n = 0; n < myMatched.length; n++) {
  target.classList.remove(myMatched[n]);
}

↑実は必要な記述は、たったのこれだけです。
対象のhtml(冒頭を参照)についている複数のclassから、
is-first という接頭辞が付いているclassだけを抽出して削除しているコードになります。

1行目では、対象とする要素を document.querySelector() で取得しています。
2行目では、対象のclass名一覧を、文字列として取得。
4行目では、次の行で match() を使って対象の文字列を探すため、正規表現で条件を作成しています。
1行目で取得した要素に付与されている、頭に is-first というclass名を持つclassを探すための条件になります。
なお、何をしているのかを明確にするために、
ここではあえて new RegExp() を実行して、正規表現オブジェクトを生成しています。
意味としては直接、正規表現を書いて match() に渡すのと同じです。
また、正規表現の部分は new RegExp(/is-first\S+/, 'g'); としても動くは動くのですが、
より丁寧な書き方として new RegExp(/\bis-first\S+/, 'g'); としています。

5行目で、上の行で定義した条件(正規表現オブジェクト)を match() に渡して、
is-first が頭についている(接頭辞を持っている)classを検索しています。
そして、一致した文字列(class名)が、配列として myMatched に格納される、という仕組みです。
この行末の || []; の部分は例外処理で、
もし一致するclassが存在しなかったら、空の配列を返す、という意味です。
今回のケースではなくても動くのですが、汎用性の意味ではあった方が良いので(例えばこの次の行で join() を使用する場合など)、例外処理として含めています。

7〜9行目では、5行目で生成した配列 myMatched を元に、
抽出したclassの分( myMatched.length の数 )だけ、
対象のhtml要素から
順番にclassを削除する処理を実行しています。

上記の流れで、
対象の要素から特定の接頭辞を持ったclassだけを絞り込んで削除する」
と言うことが実現できます。

この記事のまとめ

今回は、素の javascript を使って、
対象の複数のclass名を持つ要素から、
任意の接頭辞を含む名前を持ったclassだけ」を特定して、
それを削除する方法について記事を書きました。

単純に複数のclassが付与されている中から
クリックしたら特定のclassを削除する場合や、

応用すれば、
以前ご紹介した IntersectionObserver の記事内のサンプルの様に
cssアニメーション用のclassを削除して
動きの初期化を行う場合などに利用できる事と思います。

いずれにせよ、jQueryに依存せずに実現できるので、
覚えておくと様々なケースで役にたつ方法かと思います。

当サイトでは今後も、Web制作に関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。