특정 문자열로 시작하는 클래스를 모두 제거합니다.

특정 문자열로 시작하는 클래스를 모두 제거합니다.

저랑 디브가 있어요.id="a"몇 개의 그룹에서 임의의 수의 클래스가 연결되어 있을 수 있습니다.각 그룹에는 특정 접두사가 있습니다.자바스크립트에서는 그룹의 어떤 클래스가 디브에 있는지 모릅니다.주어진 접두사로 모든 클래스를 지우고 새로운 클래스를 추가할 수 있으면 좋겠습니다."bg"로 시작하는 수업을 모두 없애려면 어떻게 해야 하나요?이와 같은 것이지만 실제로는 효과가 있습니다.

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

단어 경계의 정규 표현 분할\b이를 위한 최선의 해결책은 아닙니다.

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

또는 jQuery mixin으로서:

$.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를 사용하면 실제 DOM 요소가 인덱스 0에 있으므로 작동합니다.

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

단순한 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;
}

의 두번째 서명을 사용합니다.$.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>​]

최신 브라우저의 경우:

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

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

간단한 jQuery construct와 배열 핸들링 함수를 사용하는 접근법은 클래스의 컨트롤과 접두사를 id로 하고 classed를 모두 삭제하는 함수를 선언하는 것입니다.코드가 첨부되어 있습니다.

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");

http://www.mail-archive.com/jquery-en @googlegroups.com/msg03998. html는 다음과 같이 말합니다.

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

저한테 효과가 있네요 ;)

건배.

저는 똑같은 문제에 대한 해결책을 찾고 있었습니다.접두사 "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_');

한 줄에...정규식 일부 RegExp와 일치하는 클래스를 모두 제거합니다.

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

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

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

프레스토울의 대답은 도움이 되었지만, 저에게는 별로 효과가 없었습니다.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);

jQuery 전용 솔루션을 원하는 사용자를 위해 jQuery로 변환된 상위 답변:

const prefix = 'prefix'
const classes = el.attr('class').split(' ').filter(c => !c.startsWith(prefix))
el.attr('class', classes.join(' ').trim())

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

언급URL : https://stackoverflow.com/questions/57812/remove-all-classes-that-begin-with-a-certain-string