JavaScript에서 특정 접두사가 있는 클래스를 효율적으로 제거하는 방법은 무엇입니까?

특정 접두사가 있는 클래스 관리

자바스크립트에서 클래스를 조작하는 것은 어려울 수 있으며, 특히 고유한 접두사가 있는 서로 다른 그룹에 속하는 여러 클래스를 처리할 때 더욱 그렇습니다. . 이 문서에서는 DIV 요소에서 특정 접두사가 있는 클래스를 제거하고 이를 새 클래스로 바꾸는 일반적인 문제를 살펴봅니다.

문제

DIV가 있다고 가정합니다. 다양한 그룹의 여러 클래스를 가질 수 있는 ID가 "a"인 요소입니다. 각 그룹에는 특정 접두사가 있습니다. 그러나 JavaScript 코드에서는 특정 그룹의 어떤 클래스가 현재 DIV 요소에 할당되어 있는지 알 수 없습니다. 목표는 "bg"와 같은 접두사가 붙은 모든 클래스를 제거하고 새 클래스를 추가하는 것입니다. 다음 코드 조각은 문제를 보여줍니다.

$("#a").removeClass("bg*");

그러나 이 코드는 의도한 대로 작동하지 않습니다.

해결책

보다 강력한 접근 방식 클래스 이름을 단어 경계로 분할하고 지정된 접두사가 없는 클래스를 필터링하는 정규식을 사용하는 것입니다. 예는 다음과 같습니다.

var prefix = "bg";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ").trim();

또는 jQuery 믹스인을 생성하여 이 프로세스를 단순화할 수 있습니다.

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

이 믹스인을 사용하려면 DIV에서 RemoveClassPrefix() 함수를 호출하기만 하면 됩니다. 요소, 제거하려는 접두사 지정:

$("#a").removeClassPrefix("bg");

ES6 업데이트(2018)

최신 JavaScript(ES6 이상)에서는 더 간단한 버전의 솔루션을 사용할 수 있습니다.

const prefix = "bg";
const classes = el.className.split(" ").filter(c => !c.startsWith(prefix));
el.className = classes.join(" ").trim();

이 코드는 화살표 기능을 활용하고 startWith( ) 지정된 접두사가 있는 클래스를 효과적으로 필터링하는 방법입니다.

위 내용은 JavaScript에서 특정 접두사가 있는 클래스를 효율적으로 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!