素の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だけを絞り込んで削除する」
と言うことが実現できます。