Remove classname từ phần tử với javascript

Question

tôi thấy regex sau đây từ một câu hỏi Stack Overflow: Change an element's class with JavaScript

Và đã sử dụng nó trong một phần của kịch bản của tôi với thành công, tuy nhiên trong một nó có vẻ là không.

Tôi ném cùng một trường hợp thử nghiệm rất nhỏ gọn trên jsFiddle, và nó cũng là thất bại:

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); 
})​ 

Answer 1

Đó là bởi vì replace không thực sự sửa đổi chuỗi bạn gọi nó; thay vào đó, nó trả về một chuỗi mới. Vì vậy:

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

(Bằng cách này, bạn không thực sự cần phải làm điều này trong nguyên JavaScript, kể từ khi đối tượng jQuery cung cấp một phương pháp removeClass:. http://api.jquery.com/removeClass/ Vì vậy, bạn có thể viết:

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

hoặc :

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

)

Answer 2

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

hoặc với jQuery (mà bạn đang sử dụng):

foo.removeClass('bar'); 

Answer 3

Ngoài ra còn có một giải pháp mà sử dụng word boundary metacharacter \b:

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

này có thể phù hợp với ai đó, nhưng lưu ý ranh giới từ xảy ra cũng giữa một ký tự từ [A-Za-z0-9_] và dấu gạch ngang - ký tự. Do đó, một tên lớp, ví dụ: 'khác nhau-bar-class' cũng sẽ được thay thế dẫn đến 'khác nhau - lớp'. Tuy nhiên, trái ngược với các giải pháp trên, giải pháp "\b" không xóa ký tự khoảng trắng \s trước tên lớp, có thể được mong muốn, vì vậy, ví dụ: 'thanh đầu tiên' sẽ kết thúc dưới dạng 'firstbar'.

Answer 4

Đừng quên khoảng classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/