时间戳

首页 > 解决方案 > 当字符串匹配所需文本时向元素添加 CSS 类 - JavaScript

javascript - 当字符串匹配所需文本时向元素添加 CSS 类 - JavaScript

问题描述

我已经开始学习 JavaScript 中的正则表达式。尽管有很多关于匹配字符等的教程，但我似乎无法弄清楚如何使 HTML 字符串成为我可以匹配的东西？

我想创建一个 if 语句，以便当字符串匹配我想要匹配的内容时，我可以将 CSS 类添加到导航菜单项。

在下面的代码中console.log(termName[i].textContent)显示了字符串本身，但是如果锚点具有.textContent“营销”，我如何使用正则表达式（或字符串方法）将 CSS 类添加到菜单项？

代码笔： 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>

标签： javascriptregexstring

解决方案

尝试使用包含。

if (termName[i].textContent.includes('Marketing')) {
      menuItem.classList.add('active')
}

推荐阅读