时间戳

首页 > 解决方案 > 获取 DOM 中与给定正则表达式匹配的一组类

javascript - 获取 DOM 中与给定正则表达式匹配的一组类

问题描述

我正在动态生成元素：

<a class="gallery1" href="base64String"> 
    <img src="base64StringThumbnail">
</a>

在数值后缀gallery变化的情况下，我无法提前预测数值，因此该类的正则表达式为"gallery\\d+". 我想只获得所有没有与该正则表达式匹配的重复项的类

所以我可以写这样的东西：

$(document).ready(function () {
  for(const clazz in matchedClasses){
    $('.' + clazz).createGallery();
  }
});

例如，如果我有带有类的元素：gallery1, gallery2, gallery1, gallery3, gallery2在 DOM 中，我会得到： [gallery1, gallery2, gallery3]以任何顺序。在 C# 和 Java 中这对我来说很容易，但我不知道如何在 JS 中实现。

标签： javascriptcollections

解决方案

您可以定位所有元素，querySelectorAll()并且属性以 selector 开头。然后遍历它们以从带有.map(). 最后使用Spread 语法和Set.

试试下面的方法：

var galleryList = document.querySelectorAll('[class^="gallery"]');
var res = [...new Set(Array.from(galleryList).map(g => g.getAttribute('class')))];
console.log(res);
<a class="gallery1" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery2" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery3" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery1" href="base64String"> 
  <img src="base64StringThumbnail">
</a>
<a class="gallery2" href="base64String"> 
  <img src="base64StringThumbnail">
</a>

推荐阅读