【javaScript・jQuery】正規表現を使って、要素から特定のクラスを削除する。

2019年6月4日JavaScript,jQuery

スポンサーリンク

jQueryの.removeClass()メソッドの引数に関数を入れることで、関数の戻り値に対応するクラス名を要素のクラス名から削除できます。

コードとしては以下のように書きます。
[index.js]

$("セレクタ").removeClass
    (function (index, className) {
        // 正規表現にマッチするクラスを取得
        matchClass = (className.match(削除したいクラスを正規表現で書く) || []).join(' ');
        return matchClass;
    });

[サンプル]
例えば、testというidを持つ要素のクラス名の中で、先頭が「start」で始まるクラスを削除したい場合は以下のように書きます。
[index.js]

$("#test").removeClass
    (function (index, className) {
        // 正規表現にマッチするクラスを取得
        matchClass = (className.match(/\bstart\S+/g) || []).join(' ');
        return matchClass;
    });

上記を実行すると
・実行前

<div id="test" class="startTest tttaa startTtt aaa"></div>

・実行後

<div id="test" class="tttaa aaa"></div>

というように、先頭にstartのついているクラスが削除されます。

「/\bstart\S+/g」
↑ここの正規表現の部分をいろいろと変えると、思い通りのクラスを削除することができます。

私はまだ正規表現には詳しくないので、正規表現についてはほかで学んでください。

JavaScript,jQuery

Posted by ton