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

Question

我有一个小型应用程序天气应用程序，它显示来自公共 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);
    })
});

如您所见，用户在输入中输入城市名称，单击搜索，然后应用程序应检查范围“mainIcon”是否包含名称以“wi-”开头的类。RegEx 是正确的，我已经使用https://regexr.com/对其进行了测试，但是在控制台中没有显示任何内容。我也试过：

const wiClass = new RegExp(/^wi-.+$/);
    if (mainIcon.classList.contains(wiClass)) {
        console.log("Icon contains wi-");
    }

但是，再一次，没有运气。我想做的是这样的：

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

为什么这不起作用？只要不涉及 jQuery，我将不胜感激（我喜欢它，但我想在 vanilla JS 中做到这一点）。

Answer 1

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

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

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

要使用正则表达式删除类，您将再次使用 className

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

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