web-dev-qa-db-ja.com

JavaScriptを使用して要素からクラス名を削除します

別のスタックオーバーフローの質問から次の正規表現を見つけました： JavaScriptで要素のクラスを変更

そして、私のスクリプトの一部で使用して成功していますが、別の方法では失敗しているようです。

私はjsFiddleに非常にミニマリストなテストケースを一緒に投げました、そしてそれも失敗しています：

http://jsfiddle.net/ew47Y/1/

HTML：

<div class="foo" id="foo">
    hello
</div>​

JS：

$(document).ready(function(){
     foo = document.getElementById('foo');
     foo.className += ' bar foobar';
     alert(foo.className);
     foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )
     alert(foo.className);
})​
javascriptregexreplaceclassname
20
Chris Sobolewski

これは、replaceが実際に呼び出した文字列を変更しないためです。むしろ、新しい文字列を返します。そう：

     foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )

（ちなみに、jQueryオブジェクトはremoveClassメソッドを提供するため、生のJavaScriptでこれを実際に行う必要はありません。 http://api.jquery.com/removeClass/ 。したがって、次のように書くことができます。

     $('#foo').removeClass('bar');

または：

     $(foo).removeClass('bar');

）

40
ruakh

classListを忘れないでください。

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

20
Derek Reynolds
foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

またはjQuery（あなたが使っているようです）：

foo.removeClass( 'bar' );
6
Mark Kahn

Word境界メタ文字\b を使用するソリューションもあります。

foo.className.replace(/\bbar\b/g ,'');

これは誰かに適していますが、Wordの境界はWordの文字[A-Za-z0-9_]とダッシュ-の文字の間にも発生することに注意してください。したがって、クラス名、たとえば 'different-bar-class'も置き換えられ、 'different--class'。ただし、上記のソリューションとは異なり、 "\b"ソリューションでは、クラス名の前にある空白文字\sが削除されない可能性があり、そのため文字列（例： 'firstbar bar'は 'firstbar'として終了します。

1
Adam