匹配CSS类并使用jquery和regex删除

match css classes and remove using jquery and regex

本文关键字：jquery regex 删除 CSS 匹配      更新时间：2023-09-26

我正在尝试匹配并从HTML标签中删除多个类:

            //Apply style to item
        $('.palette-item').each(function () {
            var $this = $(this);
            $this.on("click", function () {
            target = $("#get-clicked-element-unique-selector").text();
            //this works: matches removes one class starting with color
            //E.g color1
            $(target).removeClass (function (index, css) {
                return (css.match (/'bcolor'S+/g) || []).join(' ');
            });
            //But I want to remove not only classes starting with "color" but
            //also classes starting with "grey"
            //Have tried the following but not working
            $(target).removeClass (function (index, css) {
                return (css.match (/'bcolor'S+/g) || (/'bgrey'S+/g) || []).join(' ');
            });
            //Have tried splitting the two like so but the click event and 
            //addClass statement don't work after that
            $(target).removeClass (function (index, css) {
                return (css.match (/'bcolor'S+/g) || []).join(' ');
            });
            $(target).removeClass (function (index, css) {
                return (css.match (/'bgrey'S+/g) || []).join(' ');
            });
            $(target).addClass($(this).data('color'));
            });
        });

这是一个html被点击的例子:

<div id="color1-wrapper" class="palette-item" data-color="color1"></div>
<div id="color1a-wrapper" class="palette-item" data-color="color1a"></div>
<div class="grey0 palette-item" data-color="grey0"></div>
<div class="grey1 palette-item" data-color="grey1"></div>

这是"#get-clicked-element-unique-selector"的引用:

<p id="get-clicked-element-unique-selector"></p>

我认为错误在match。

css参数是一个字符串，包含所有类"class1 class2 class3"(如果直接添加到html代码中)。

我的建议是这样做，如果你试图删除以"color"开头的类:

return ((" "+css+" ").match(/'bcolor'S*'b/g)||[]).join(' ');

关键是用空格包装css字符串，然后匹配"space+classPrefix+anyCharacters+space"。

这里有一把小提琴。

你可以试试这个regex:

  var m=c.match(/(color[a-zA-Z0-9]+)|(grey[a-zA-Z0-9]+)/g);
  return m ? m.join(' ') : m;

它将匹配您正在寻找的类。我在这里创建了一个演示:http://jsfiddle.net/lotusgodkk/mnYpB/4/

你可以在你的代码中实现它，并尝试它是否工作。

这将更好地表达您想要匹配的内容:

css.match (/'b(color|grey)'S+/g)
相关文章：