특정 문자열로 시작하는 모든 클래스 제거

id="a"여러 그룹에서 여러 클래스를 연결할 수 있는 div가 있습니다. 각 그룹에는 특정 접두사가 있습니다. 자바 스크립트에서 그룹의 어떤 클래스가 div에 있는지 모르겠습니다. 주어진 접두사가있는 모든 클래스를 지운 다음 새 클래스를 추가 할 수 있기를 원합니다. "bg"로 시작하는 모든 클래스를 제거하려면 어떻게해야합니까? 이와 비슷하지만 실제로 작동합니다.

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

jQuery를 사용하면 실제 DOM 요소가 인덱스 0에 있으므로 작동합니다.

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

단어 경계에서 정규식 분할 \b은 이에 대한 최상의 솔루션이 아닙니다.

var prefix = "prefix";
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;
};

2018 ES6 업데이트 :

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

와일드 카드 클래스 제거를 수행 하는 간단한 jQuery 플러그인-alterClass를 작성했습니다 . 선택적으로 클래스도 추가합니다.

$( '#foo' ).alterClass( 'foo-* bar-*', 'foobar' ) 

이를 처리하기 위해 jQuery 특정 코드가 필요하지 않습니다. RegExp를 사용하여 대체하십시오.

$("#a").className = $("#a").className.replace(/\bbg.*?\b/g, '');

접두사를 지원하도록 수정할 수 있지만 RegExp가 한 번만 컴파일되므로 더 빠른 방법이 위에 있습니다.

function removeClassByPrefix(el, prefix) {
    var regx = new RegExp('\\b' + prefix + '.*?\\b', 'g');
    el.className = el.className.replace(regx, '');
    return el;
}

사용 2 차 서명 의를 $.fn.removeClass:

// Considering:
var $el = $('<div class="  foo-1 a b foo-2 c foo"/>');

function makeRemoveClassHandler(regex) {
  return function (index, classes) {
    return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' ');
  }
}

$el.removeClass(makeRemoveClassHandler(/^foo-/));
//> [<div class=​"a b c foo">​</div>​]

http://www.mail-archive.com/jquery-en@googlegroups.com/msg03998.html 내용 :

... 그리고 .removeClass ()는 모든 클래스를 제거합니다 ...

그것은 나를 위해 작동합니다;)

건배

간단한 jQuery 구문과 배열 처리 함수를 사용하여 사용하는 접근 방식은 컨트롤의 ID와 클래스의 접두사를 취하고 모든 클래스를 삭제하는 함수를 선언하는 것입니다. 코드가 첨부되어 있습니다.

function removeclasses(controlIndex,classPrefix){
    var classes = $("#"+controlIndex).attr("class").split(" ");
    $.each(classes,function(index) {
        if(classes[index].indexOf(classPrefix)==0) {
            $("#"+controlIndex).removeClass(classes[index]);
        }
    });
}

이제이 함수는 어디에서나 버튼을 클릭하거나 코드에서 호출 할 수 있습니다.

removeclasses("a","bg");

나는 똑같은 문제에 대한 해결책을 찾고있었습니다. 접두사 "fontid_"로 시작하는 모든 클래스를 제거하려면이 기사를 읽은 후 지금 사용하고있는 작은 플러그인을 작성했습니다.

(function ($) {
        $.fn.removePrefixedClasses = function (prefix) {
            var classNames = $(this).attr('class').split(' '),
                className,
                newClassNames = [],
                i;
            //loop class names
            for(i = 0; i < classNames.length; i++) {
                className = classNames[i];
                // if prefix not found at the beggining of class name
                if(className.indexOf(prefix) !== 0) {
                    newClassNames.push(className);
                    continue;
                }
            }
            // write new list excluding filtered classNames
            $(this).attr('class', newClassNames.join(' '));
        };
    }(fQuery));

용법:

$('#elementId').removePrefixedClasses('prefix-of-classes_');

최신 브라우저의 경우 :

let element = $('#a')[0];
let cls = 'bg';

element.classList.remove.apply(element.classList, Array.from(element.classList).filter(v=>v.startsWith(cls)));

오래된 질문이라는 것을 알고 있지만 새로운 해결책을 찾았고 단점이 있는지 알고 싶습니다.

$('#a')[0].className = $('#a')[0].className
                              .replace(/(^|\s)bg.*?(\s|$)/g, ' ')
                              .replace(/\s\s+/g, ' ')
                              .replace(/(^\s|\s$)/g, '');

한 줄에 ... someRegExp 정규식과 일치하는 모든 클래스를 제거합니다.

$('#my_element_id').removeClass( function() { return (this.className.match(/someRegExp/g) || []).join(' ').replace(prog.status.toLowerCase(),'');});

Prestaul의 답변은 도움이되었지만 저에게는 효과적이지 않았습니다. id로 객체를 선택하는 jQuery 방법이 작동하지 않았습니다. 나는 사용해야했다

document.getElementById("a").className

대신에

$("#a").className

또한 클래스 이름에 하이픈 '-'과 숫자를 사용합니다. 그래서 내 버전에는 '\ d-'가 포함됩니다.

$('#a')[0].className = $('#a')[0].className.replace(/\bbg.\d-*?\b/g, '');

(function($)
{
    return this.each(function()
    {
        var classes = $(this).attr('class');

        if(!classes || !regex) return false;

        var classArray = [];

        classes = classes.split(' ');

        for(var i=0, len=classes.length; i<len; i++) if(!classes[i].match(regex)) classArray.push(classes[i]);

        $(this).attr('class', classArray.join(' '));
    });
})(jQuery);

$("#element").removeAttr("class").addClass("yourClass");