Javascript 使用正则表达式单击删除类

我有一个小应用程序天气应用程序，它显示一些来自公共API的基本信息，并根据这些信息，我在应用程序中添加了一个特定图标，例如太阳、阴天。用户可以在第一个城市之后查看另一个城市，我希望在每次条件变化时更改该图标。我可以清除所有类，添加基本类，然后添加正确的图标类，或者只是将每个if更改为classlist所有相关类，但我更愿意使用RegEx。以下是该应用程序的工作原理：

cityButton.addEventListener("click", function() {
    if (mainIcon.classList.contains(new RegExp(/^wi-.+$/))) {
        console.log("Icon contains wi-");
    }
    fetch(api + "q=" + cityInput.value + "&APPID=" + key + "&units=metric")
    .then((resp) => resp.json())
    .then((data) => {
        let date = new Date();
        let currentTime = date.getHours();
        if (currentTime >= 6 && currentTime <= 18 && data.clouds.all < "25") {;
            mainIcon.classList.add("wi-day-sunny");
        } else if (currentTime >= 18 && currentTime <= 6 && data.clouds.all < "25") {
            mainIcon.classList.add("wi-night-clear");
        } else if (currentTime >= 6 && currentTime <= 18 && data.clouds.all >= "25" && data.clouds.all < "50") {
            mainIcon.classList.add("wi-day-cloudy");
        } else if (currentTime >= 18 && currentTime <= 6 && data.clouds.all >= "25" && data.clouds.all < "50") {
            mainIcon.classList.add("wi-night-alt-cloudy");
        } else if (currentTime >= 6 && currentTime <= 18 && data.clouds.all >= "50" && data.clouds.all < "75") {
            mainIcon.classList.add("wi-day-cloudy-high");
        } else if (currentTime >= 18 && currentTime <= 6 && data.clouds.all >= "50" && data.clouds.all < "75") {
            mainIcon.classList.add("wi-night-alt-cloudy-high");
        } else if (data.clouds.all >= "75") {
            mainIcon.classList.add("wi-cloudy");
        }
        temperature.innerHTML = data.main.temp;
        tempMin.textContent = data.main.temp_min;
        tempMax.textContent = data.main.temp_max;
        pressure.textContent = data.main.pressure + " hPa";
        humidity.textContent = data.main.humidity + " %";
        wind.textContent = data.wind.speed + " m/s";
        clouds.textContent = data.clouds.all + " %";
        windDir.textContent = data.wind.deg;
        city.textContent = data.name;
        if (data.rain !== undefined) {
            rain.textContent = data.rain + " %";
        }
    })
    .catch(function(error) {
        console.log(error);
    })
});

但同样，没有运气。我想做的是这样的：

if (mainIcon.classList.contains(wiClass)) {
        mainIcon.classList.remove(wiClass);
    } else {
        return;
    }

为什么不起作用？我将感谢您的所有回答，只要不涉及jQuery，我喜欢它，但我想在vanilla JS中使用。

您不应该与正则表达式一起使用，contains方法与字符串参数一起使用，而不是regex。您可以将普通的旧className属性用于方法：

若要删除带有正则表达式的类，请再次使用className

注意，正则表达式中的g global标志是删除所有wi类所必需的。

您不应该与正则表达式一起使用，它包含的方法与字符串参数一起使用，而不是正则表达式。您可以将普通的旧className属性用于方法：

若要删除带有正则表达式的类，请再次使用className

---

注意，正则表达式中的g全局标志是删除所有wi类所必需的。

contains不适用于正则表达式。请使用className.matchwiClass或wiClass.execclassName。如果不存在匹配项，则此函数将返回nullcontains，因为它不适用于正则表达式。请使用className.matchwiClass或wiClass.execclassName。如果不存在匹配项，则此函数将返回null。很遗憾，此函数不起作用。即使主图标有wi clody和wi day sunny，它也不能工作。如果mainIcon.className.matchwiClass{console.logIcon包含wi-；}或者{console.logIcon不包含wi-；}可能是因为正则表达式不是很不可靠。我会使用这样的东西/\bwi-.+？\b/。但无论如何，对于你发布的usecase，它对我是有效的。当wi-something是唯一的类时，它可以工作，但是如果有其他类，则似乎存在问题。这里是更新的小提琴：更新：我已经改变了我的正则表达式到你的，现在它可以正常工作。因此，第一个问题消失了。另一个问题是-如何使用正则表达式删除类？classList.remove也只接受字符串-那么我该怎么做呢？非常感谢，现在它像一个符咒一样工作：另外，我已经将您的正则表达式更改为/\bwi-。+\b/因为这个类可以是wi某物或wi某物-更新的fiddle-不幸的是，无法工作。即使主图标有wi clody和wi day sunny，它也不能工作。如果mainIcon.className.matchwiClass{console.logIcon包含wi-；}或者{console.logIcon不包含wi-；}可能是因为正则表达式不是很不可靠。我会使用这样的东西/\bwi-.+？\b/。但无论如何，对于你发布的usecase，它对我是有效的。当wi-something是唯一的类时，它可以工作，但是如果有其他类，则似乎存在问题。这里是更新的小提琴：更新：我已经改变了我的正则表达式到你的，现在它可以正常工作。因此，第一个问题消失了。另一个问题是-如何使用正则表达式删除类？classList.remove也只接受字符串-那么我该怎么做呢？非常感谢，现在它就像一个符咒：另外，我已经将您的正则表达式更改为/\bwi-。+\b/因为这个类可以是wi-something或wi-something-updated fiddle-

if (mainIcon.classList.contains(wiClass)) {
        mainIcon.classList.remove(wiClass);
    } else {
        return;
    }

const wiClass = new RegExp(/\bwi-.+?\b/, 'g');

if (mainIcon.className.match(wiClass)) {
    console.log("Icon contains wi-");
}

if (mainIcon.className.match(wiClass)) {
    console.log("Icon contains wi-");
    mainIcon.className = mainIcon.className.replace(wiClass, '')
}