前几天在开发一个前端项目时，我遇到了一个问题：页面上有多个
div，它们的class名都以相同的前缀开头，后面部分则是随机生成的，比如class="xiaodou___abab"。我需要通过 JavaScript 精确定位这些div，但由于后缀部分是动态变化的，无法使用固定的类名进行选择。这种情况下，如何才能准确地通过类名前缀定位到这些div元素呢？
解决方案
这个问题其实非常常见，特别是在使用一些组件库或者构建工具生成的类名时。经过查找和实验，我找到了几种解决方案，接下来我会逐一分享它们的实现方法和适用场景，这里主要有三种解决方案：
- 简单前缀匹配 ：使用
querySelectorAll和^= - 手动过滤 ：结合
getElementsByClassName或querySelectorAll手动筛选 - 复杂匹配逻辑：使用正则表达式实现复杂匹配
方法 1：使用 querySelectorAll 和属性选择器 ^=（推荐）
首先，最直接也是最推荐的解决方案就是使用 querySelectorAll 和属性选择器 ^=。这是 CSS 选择器中非常实用的一部分，^= 表示"以特定字符串开头"。通过这种方式，可以非常方便地选择所有具有相同前缀的类名元素。
js
// 选择所有以 'xiaodou___' 开头的类名元素
const elements = document.querySelectorAll('[class^="xiaodou___"]');
// 遍历所有匹配的元素并输出
elements.forEach(element => {
console.log(element);
});适用场景：
- 当类名前缀是固定的，且后缀部分动态变化。
- 需要在多个元素中快速选择匹配特定前缀的元素。
这个方法最大的优势是简洁易懂，代码量少，且性能较好。因为 querySelectorAll 是浏览器原生支持的，它可以高效地查询 DOM 元素。
方法 2：使用 getElementsByClassName 并手动过滤
第二种方案是通过 getElementsByClassName 来获取所有的元素，然后手动过滤出符合条件的那些。这种方法的好处是，它适用于那些可能不完全满足某个前缀模式的元素。虽然 getElementsByClassName 不支持前缀匹配，但我们可以手动检查每个元素的 className 属性。
js
// 获取页面上所有的 `div` 元素
const allDivs = document.getElementsByTagName('div');
// 过滤出类名以 'xiaodou___' 开头的元素
const matchingDivs = Array.from(allDivs).filter(div => div.className.startsWith('xiaodou___'));
console.log(matchingDivs);适用场景：
- 当你只想查找某个特定标签（如
div）下的元素。 - 你想手动处理类名的复杂变化，比如仅匹配多个前缀中的一个。
这个方法虽然灵活，但相比于 querySelectorAll，它需要手动处理每个元素的 className，代码稍显冗长，并且在处理大规模元素时性能可能会受到影响。
方法 3：使用正则表达式匹配类名
第三种方法适用于类名规则更加复杂的情况。假如类名前缀和后缀之间存在更多的变动因素，比如某些前缀的中间部分还包含动态生成的字符，这时我们可以通过正则表达式匹配类名。
js
// 获取页面上所有的 `div` 元素
const allDivs = document.querySelectorAll('div');
// 使用正则表达式过滤出类名符合条件的元素
const matchingDivs = Array.from(allDivs).filter(div => {
return /^xiaodou___/.test(div.className);
});
console.log(matchingDivs);适用场景：
- 当类名前缀或后缀部分的变化较为复杂，不能简单地通过
startsWith或querySelector处理时。 - 你希望对类名进行更细粒度的控制，比如只匹配特定的字符组合。
正则表达式非常强大，它可以帮助你处理各种复杂的字符串匹配情况。不过，它也有可能增加代码的复杂性，特别是对于不熟悉正则表达式的开发者来说，阅读和维护这种代码可能会稍显困难。