如何有效率地刪除 JavaScript 中帶有特定前綴的類別？

管理具有特定前綴的類別

在JavaScript 中操作類別可能具有挑戰性，尤其是在處理屬於具有唯一前綴的不同組的多個類別時。本文探討了一個常見問題：從 DIV 元素中刪除具有特定前綴的類別並將其替換為新的類別。

問題

假設您有一個 DIV ID 為「a」的元素可以具有來自不同組的多個類別。每個組都有一個特定的前綴。但是，在 JavaScript 程式碼中，您可能不知道目前將特定群組中的哪個類別指派給 DIV 元素。您的目標是刪除所有帶有“bg”等前綴的類別並添加一個新類別。以下程式碼片段說明了該問題：

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

但是，此程式碼無法如預期般運作。

解決方案

更強大的方法就是使用正規表示式，在單字邊界上分割類別名稱，並過濾掉沒有指定前綴的類別。以下是一個範例：

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

要使用此 mixin，只需在 DIV 上呼叫removeClassPrefix()函數即可元素，指定要刪除的前綴：

$("#a").removeClassPrefix("bg");

ES6更新（2018）

在現代JavaScript（ES6 及更高版本）中，您可以使用更簡單版本的解：

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

此程式碼利用箭頭函數和startsWith( )方法來有效過濾掉具有指定前綴的類別。

以上是如何有效率地刪除 JavaScript 中帶有特定前綴的類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！