如何用JavaScript正则表达式精准匹配特定class属性的li标签？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何用JavaScript正则表达式精准匹配特定class属性的li标签？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

js正则匹配div问题

问题：

如何使用javascript正则表达式匹配以下html中的li标签，该标签具有class属性“n-item n-item-ad spread-item news-item”？

<p><img src="..." alt></p>
<p>...</p>
<li class="n-item n-item-ad spread-item news-item">...</li>
<p>...</p>

尝试的正则表达式：

var reg = new regexp("<li class=\"n-item n-item-ad spread-item news-item\">([\s\s]*?)</li>", "g");

问题原因：

提供的正则表达式无法匹配上述html，因为其中使用了html实体（"<"和">"），而非原始的尖括号。

正确解决方案：

可以考虑使用以下一种或多种方法来解决此问题：

queryselector() 方法：

使用queryselector()方法可以更轻松地选择具有特定css类的元素：

var elements = document.queryselectorall(".n-item.n-item-ad.spread-item.news-item");

原生javascript：

也可以使用原生javascript方法getelementsbyclassname()来查找具有特定css类的元素，然后使用array.prototype.filter()方法对其进行过滤：

var elements = Array.from(document.getElementsByClassName("n-item")).filter(function(element) {
  return element.classList.contains("n-item-ad") && element.classList.contains("spread-item") && element.classList.contains("news-item");
});

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~