RegEx로 클릭하여 수업 삭제하기

Question

공공 API의 기본 정보를 표시하는 작은 앱 날씨 앱이 있으며 그 정보를 기반으로 특정 아이콘 (예 : 태양, 흐림)을 앱에 추가합니다. 사용자는 첫 번째 도시 이후 다른 도시를 확인할 수 있으며 조건이 변경 될 때마다 해당 아이콘을 변경하고 싶습니다. 모든 클래스를 지우고 기본 클래스를 추가 한 다음 오른쪽 아이콘 클래스를 추가하거나 모든 클래스를 "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-."정규식이 올바른지 시작 이름의 클래스가 포함되어있는 경우 다음 앱에서 확인해야합니다 .

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

을 그러나 다시, 운은 내가하고 싶은 뭔가입니다 : 내가 https://regexr.com/를 사용하여 테스트를하지만, 콘솔에 표시 아무것도없는 것 또한 시도했습니다. 다음과 같이 g :

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

왜 작동하지 않습니까? 관련된 모든 jQuery가없는 한 모든 답변을 주셔서 감사하겠습니다 (마음에 들지만 바닐라 JS에서하고 싶습니다).

Answer 1

정규 표현식과 함께 classList을 사용하면 안되며 contains 메서드는 정규 표현식이 아닌 문자열 매개 변수와 함께 작동합니다. 다시 모든 wi-을 제거하기 위해 className

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

주, 필요 정규 표현식에서 g 글로벌 플래그를 사용하는 것이

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

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

는 정규 표현식으로 클래스를 제거하려면 : 당신은 match 방법으로 보통 오래된 className 속성을 사용할 수 있습니다 수업.