当前位置:  开发笔记 > 编程语言 > 正文

删除所有以某个字符串开头的类

如何解决《删除所有以某个字符串开头的类》经验,为你挑选了5个好方法。



1> sarink..:

字边界上的正则表达式分裂\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();


这比使用带有\ b(字边界检查)的RegExp更好的方法,因为它可以防止弹出"僵尸类".如果您有类似"prefix-suffix"的类,则此主题中的"最佳答案"将保留类'-suffix',因为\ b将在' - 'char之前拆分.你的split-map-join解决方案可以解决这个问题:)我在你的解决方案周围创建了一个小小的jQuery插件,Kabir:(https://gist.github.com/2881585)
+1我同意,每个其他答案似乎只是一个简单的正则表达式,将破坏非空格字界限.如果我明天有时间,我会提供证明这一点的单元测试.
这种方法效果最好.我使用了@ JakubP的插件.一个建议,如果我可以:它做什么,当它现在返回类,它会导致很多空间.例如`class ="blackRow blackText orangeFace blackHead"`将返回`class ="orangeFace"`如果你运行`removeClassPrefix("black");`.我通过修剪结果解决了这个问题:`el.className = $ .trim(classes.join(""));`.

2> Pat..:

使用jQuery,实际的DOM元素在索引为零,这应该工作

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


小心这个.字符边界在短划线字符(' - ')和点和其他字符上分割,因此类名称如"bg.a","bg-a"等不会被删除,而是替换为".a"," - a"等所以如果你有带有标点字符的类名,你可能会因为运行一个简单的正则表达式替换而遇到麻烦.这是一个SO线程[关于字边界定义](http://stackoverflow.com/questions/1324676/what-is-a-word-boundary-in-regexes)
Kabir Sarin在下面用split('')和indexOf的答案是更好的IMO,因为它不会导致那些特殊的"僵尸"类弹出.
此方法仍然可以与更好的正则表达式一起使用,例如在此处找到的正则表达式:http://stackoverflow.com/a/2644364/1333402

3> Pete B..:

我写了一个简单的jQuery插件 - alterClass,它可以删除通配符类.也可以选择添加类.

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



4> Prestaul..:

您不需要任何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;
}



5> abernier..:

使用第二个签名的$.fn.removeClass:

// Considering:
var $el = $('
'); function makeRemoveClassHandler(regex) { return function (index, classes) { return classes.split(/\s+/).filter(function (el) {return regex.test(el);}).join(' '); } } $el.removeClass(makeRemoveClassHandler(/^foo-/)); //> [
?
?]

推荐阅读
乐韵答题
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有