要素がクラスを持つかを複数条件で判定する

クラスの有無を複数条件で調べたい

　JavaScriptで要素をいじっていると、クラス使って要素の判別をしたくなる時があります。
　要素がクラスを持っているかを調べるときに便利なのがclassList。classListの仕様については説明に自信がないので割愛させていただきます。

singleClass.js

// element = <p class="hoge"></p> だとします。

if(element.classList.contains("hoge")){
    console.log("Element has 'huga'!");
}

　で、これに加えて"fuga"クラスを持っている場合を判定したいんです私は。
　単純にやると、以下のようになります。

multiClass.js

if(element.classList.contains("hoge") || element.classList.contains("fuga")){
    console.log("Element has 'hoge' or 'fuga'!");
}

// ちなみにこうやっても最初の1つしか見てくれない
if(element.classList.contains("hoge","fuga")){
    console.log("Element has 'hoge' or 'fuga'!");
}

　もっと増えた時ただただ長くなるだけだし、同じこと何回も書くのが個人的に好みではありません。
　調べていると、引数指定を"hoge"&&"fuga"とやれば複数指定できる！って記事見つけたんですけど、順番入れ替えて調べると最後の1つしか見てないようです。

解決法(力技)

　まあ、脳筋の私ですのでスマートなやり方ではないです。classNameを使いました。classNameの仕様については説明に自信(以下略失礼)。

multiClass.js

if(/(hoge|fuga)/.test(element.className.split(/\W/)){
    console.log("Element has 'hoge' or 'fuga'!");
}

　一応説明させていただきますと、Element.classNameでクラスリストを文字列で取得し、正規表現を使用してスペースで分割した配列を、これまた正規表現でtestしています。
このtest時に複数のチェックしたいクラス名を指定しています。(testって配列に対してもちゃんとチェックしてくれるんですね。)

追記

　コメントにてご指摘頂きました。ありがとうございます。testメソッドに配列を渡した場合、全部の要素に対してチェックしてくれるのではなく、配列を文字列化したものに対してチェックしているらしいです。確認不足でした。コメント欄に検証結果をいただいています。

それを受けまして、力技は変わらず2種類ほど対策と別の方法を記述いたします。

test_array.js

// これだと"true"判定される
/(hog|f)/.test(element.className.split(/\W/))
// true

// 単純に対策
/(^|,)(hoge|fuga)[,$]/.test(element.className.split(/\W/))
// true

/(^|,)(hog|f)[,$]/.test(element.className.split(/\W/))
// false

// 別の方法
element.className.split(/\W/).some(name => /^(hoge|fuga)$/.test(name))
// true

前者は、配列を文字列化していることに単純に対応したものです。カンマで分けられた部分に対してチェックをしています。
後者は、classNameを分けた配列にsomeでチェックをしています。まあ結局全部調べるというのを自分で書いているだけですし、正直OR条件で書いているのとそこまでもう変わらないんじゃ…という気持ちがあります。

---

　私が気がついていない誤字・脱字、それは違うよボケェ！というところあれば私としても是非直したいので教えてください。