Добавление класса CSS к элементу, когда строка соответствует требуемому тексту - JavaScript - PullRequest
0 голосов
/ 27 февраля 2020

Я начал изучать регулярные выражения в JavaScript. Несмотря на то, что существует множество учебных пособий по соответствующим символам и т. Д. c Я не могу понять, как сделать строку HTML такой, которую я могу сопоставить?

Я хочу создать оператор if, когда строка соответствует тому, что я хочу сопоставить, я могу добавить класс CSS к пункту меню навигации.

В приведенном ниже коде console.log(termName[i].textContent) показывает, что строки сами по себе, но как использовать регулярное выражение (или строковый метод), чтобы добавить класс CSS к пункту меню, если якорь имеет .textContent из 'Marketing'?

CodePen: https://codepen.io/emilychews/pen/abOJMwa

Спасибо,

Эмили

var termName = document.querySelectorAll('.single-news-cat a'),
    menuItem = document.getElementsByClassName('menu-item-1') [0]
    

for (i = 0; i < termName.length; i+=1) {

      // shows strings in console
      console.log(termName[i].textContent)

      // pseudo code for matching 
      if (termName[i].textContent == 'Marketing') {
          menuItem.classList.add('active')
      }
        
}
body {
  margin: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%
}

.single-news-cat {
  margin-top: 3rem;
}

.menu-item-1.active {
  color: red;
}
<div class="menu-item menu-item-1">Dev</div>

<div class="single-news-cat">
    <a href="#">Marketing</a>
    <a href="#">Design</a>
</div>

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Попробуйте использовать включает в себя.

if (termName[i].textContent.includes('Marketing')) {
      menuItem.classList.add('active')
}
0 голосов
/ 27 февраля 2020

Это должно помочь вам.

var termName = document.querySelectorAll('.single-news-cat a'),
    menuItem = document.querySelector('.menu-item-1');

for (i = 0; i < termName.length; i+=1) {

      // shows strings in consolue
      console.log(termName[i].textContent)

      // pseudo code for matching 
      if (/marketing/i.test(termName[i].textContent)) {
          menuItem.classList.add('active')
      }

}

При этом используется метод регулярных выражений test с учетом регистра.
Также изменено getElementsByClassName на querySelector.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...