feat(core utils): removeWildcardClass: Add support for pure DOM nodes instead of needing jQuery objects.

Author: thet

src/core/utils.js

@@ -204,21 +204,40 @@ function escapeRegExp(str) {
     return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 }
 
-function removeWildcardClass($targets, classes) {
-    if (classes.indexOf("*") === -1) $targets.removeClass(classes);
-    else {
-        var matcher = classes.replace(/[\-\[\]{}()+?.,\\\^$|#\s]/g, "\\$&");
+/**
+ * Remove classes from a list of targets if they match a specific pattern.
+ *
+ * @param {Node, NodeList} targets: Dom Node or NodeList where the classes should be removed.
+ * @param {string} classes: String matching classes to be removed.
+ *                          You can add a "*" as wildcard to search for classes to be removed.
+ *                          E.g. "icon-*-alert" to remove any of "icon-1-alert icon-2-alert".
+ *
+ * @returns {undefined}: This method directly operates on the targets.
+ */
+function removeWildcardClass(targets, classes) {
+    targets = utils.ensureArray(targets);
+
+    if (classes.indexOf("*") === -1) {
+        for (const target of targets) {
+            target.classList.remove(classes);
+        }
+    } else {
+        let matcher = classes.replace(/[\-\[\]{}()+?.,\\\^$|#\s]/g, "\\$&");
         matcher = matcher.replace(/[*]/g, ".*");
         matcher = new RegExp("^" + matcher + "$");
-        $targets.filter("[class]").each(function () {
-            var $this = $(this),
-                classes = $this.attr("class").split(/\s+/),
-                ok = [];
-            for (var i = 0; i < classes.length; i++)
-                if (!matcher.test(classes[i])) ok.push(classes[i]);
-            if (ok.length) $this.attr("class", ok.join(" "));
-            else $this.removeAttr("class");
-        });
+
+        for (const target of targets) {
+            const class_list = (target.getAttribute("class") || "").split(/\s+/);
+            if (!class_list.length) {
+                continue;
+            }
+            const ok = class_list.filter((it) => !matcher.test(it));
+            if (ok.length) {
+                target.setAttribute("class", ok.join(" "));
+            } else {
+                target.removeAttribute("class");
+            }
+        }
     }
 }
 

src/core/utils.test.js

@@ -214,40 +214,87 @@ describe("basic tests", function () {
 });
 
 describe("removeWildcardClass", function () {
-    it("Remove basic class", function () {
-        var $el = $("<div class='on'/>");
-        utils.removeWildcardClass($el, "on");
-        expect($el.hasClass("on")).toBe(false);
-    });
+    describe("... with single element", function () {
+        it("Remove basic class", function () {
+            const el = document.createElement("div");
+            el.classList.add("on");
+            utils.removeWildcardClass(el, "on");
+            expect(el.classList.contains("on")).toBe(false);
+        });
 
-    it("Keep other classes", function () {
-        var $el = $("<div class='one two'/>");
-        utils.removeWildcardClass($el, "one");
-        expect($el.attr("class")).toBe("two");
-    });
+        it("Keep other classes", function () {
+            const el = document.createElement("div");
+            el.classList.add("one");
+            el.classList.add("two");
+            utils.removeWildcardClass(el, "one");
+            expect(el.classList.contains("one")).toBe(false);
+            expect(el.classList.contains("two")).toBe(true);
+        });
 
-    it("Remove uses whole words", function () {
-        var $el = $("<div class='cheese-on-bread'/>");
-        utils.removeWildcardClass($el, "on");
-        expect($el.attr("class")).toBe("cheese-on-bread");
-    });
+        it("Remove removes whole words", function () {
+            const el = document.createElement("div");
+            el.classList.add("cheese-on-bread");
+            utils.removeWildcardClass(el, "on");
+            expect(el.getAttribute("class")).toBe("cheese-on-bread");
+        });
 
-    it("Remove wildcard postfix class", function () {
-        var $el = $("<div class='icon-small'/>");
-        utils.removeWildcardClass($el, "icon-*");
-        expect($el.attr("class")).toBeFalsy();
-    });
+        it("Remove wildcard postfix class", function () {
+            const el = document.createElement("div");
+            el.classList.add("icon-small");
+            utils.removeWildcardClass(el, "icon-*");
+            expect(el.getAttribute("class")).toBeFalsy();
+        });
+
+        it("Remove wildcard infix class", function () {
+            const el = document.createElement("div");
+            el.classList.add("icon-small-alert");
+            utils.removeWildcardClass(el, "icon-*-alert");
+            expect(el.getAttribute("class")).toBeFalsy();
+        });
 
-    it("Remove wildcard infix class", function () {
-        var $el = $("<div class='icon-small-alert/>");
-        utils.removeWildcardClass($el, "icon-*-alert");
-        expect($el.attr("class")).toBeFalsy();
+        it("Keep other classes when removing wildcards", function () {
+            const el = document.createElement("div");
+            el.classList.add("icon-small");
+            el.classList.add("foo");
+            utils.removeWildcardClass(el, "icon-*");
+            expect(el.getAttribute("class")).toBe("foo");
+        });
     });
 
-    it("Keep other classes when removing wildcards", function () {
-        var $el = $("<div class='icon-small foo'/>");
-        utils.removeWildcardClass($el, "icon-*");
-        expect($el.attr("class")).toBe("foo");
+    describe("... with a list of elements", function () {
+        beforeEach(function () {
+            document.body.innerHTML = "";
+        });
+
+        afterEach(function () {
+            document.body.innerHTML = "";
+        });
+
+        it("Keep other classes", function () {
+            document.body.innerHTML = `
+                <div class="one two"></div>
+                <div class="two three"></div>
+            `;
+            const inner_els = document.querySelectorAll("div");
+            utils.removeWildcardClass(inner_els, "two");
+            expect(inner_els[0].classList.contains("one")).toBe(true);
+            expect(inner_els[0].classList.contains("two")).toBe(false);
+            expect(inner_els[1].classList.contains("two")).toBe(false);
+            expect(inner_els[1].classList.contains("three")).toBe(true);
+        });
+        it("Remove wildcard infix class", function () {
+            document.body.innerHTML = `
+                <div class="one icon-1-alert"></div>
+                <div class="two icon-2-alert icon-3-alert"></div>
+            `;
+            const inner_els = document.querySelectorAll("div");
+            utils.removeWildcardClass(inner_els, "icon-*-alert");
+            expect(inner_els[0].classList.contains("one")).toBe(true);
+            expect(inner_els[0].classList.contains("icon-1-alert")).toBe(false);
+            expect(inner_els[1].classList.contains("two")).toBe(true);
+            expect(inner_els[1].classList.contains("icon-2-alert")).toBe(false);
+            expect(inner_els[1].classList.contains("icon-3-alert")).toBe(false);
+        });
     });
 });