2017-05-03 9 views
0

いくつかの条件に従ってHTML要素からクラスを削除します。regex jsの一致するパターンから空白を削除します

elem.className = elem.className.replace(/shake|progress|done/g, ''); 

しかし、このパターンは、誰かが別のクラスを追加した場合も削除されますよう、shakerを言うという問題があります。これは私の正規表現パターンです。パターンを次のように変更しました:

elem.className = elem.className.replace(/(^|\s)shake(\s|$)|(^|\s)progress(\s|$)|(^|\s)done(\s|$)/g, ''); 

ここで、単語全体が一致する場合のみ削除されます。しかし、それは単語の周りのスペースを削除するようになりました。この問題を解決する方法がわかりません。これで私を助けてください。

+1

これは正規表現の仕事ではありません。代わりに['classList'](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)と対話してください。 –

+0

正規表現の適用前後で文字列を意味する前後の正確な例を与えることができます –

+3

Derekは正解です。しかし、単語全体を正規表現とマッチさせる手法は、とにかく言及する価値があるかもしれません。[単語境界アンカー](http://www.regular-expressions.info/wordboundaries.html)を見てください。 –

答えて

3

これは正規表現の仕事ではありません。代わりにclassListと対話してください。

elem.classList.remove("shake", "progress", "done"); // removes all 3 class values 
+0

ありがとうございます。しかし、おそらく私はその言葉全体に一致する必要がある場合もあります。どのような正規表現のパターンをする必要があります。 –

0

classList.removeが最適です。

これは、あなたの質問に答える:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div id="tt" class="eins zwei drei meins">ABC</div> 
</body> 
    <script> 
    tt.className=tt.className.replace(/\beins|zwei|drei/g, ''); 
    </script> 

</html> 
0

私はあなたが単語全体を一致させたい場合しかし、あなたはこれを実現することができ、classListはここに移動するための方法であることを他の人と同意します。スペース上でclassNameを分割し、除外するクラスのリストにある項目をフィルタリングします。

const classes = elem.className.split(' '); 
const remove = ['shake', 'progress', 'done']; 

elem.className = classes.filter(cls => !remove.includes(cls)).join(' '); 
関連する問題