使用 querySelector 查询元素时，如何使用正则进行模糊匹配查询？

这要用到元素属性值正则匹配选择器，它包括下面 3 种：

其中，尖角符号^、美元符号$ 以及星号*都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。

由于现代网页源码都是编译过后的产物，发到用户浏览器中的源码经常有这样的元素节点：

html

<h2 class="UserInfoBox_textEllipsis_13jj5" f_c="8">点击登录</h2>

<h2 class="UserInfoBox_textEllipsis_13jj5" f_c="8">点击登录</h2>

其中，13jj5 并不是固定的，它是一串随机字符，是前端框架在编译时为了避免组件样式混淆而故意添加的。每一次产品重新发布，这个 class 样式便会变化一次。

如果我们在智能化产品中直接这样查询目标元素：

javascript

document.querySelector('h2.UserInfoBox_textEllipsis_13jj5')

document.querySelector('h2.UserInfoBox_textEllipsis_13jj5')

下次产品重发后，代码便不再有效了。这种情况便适合采用属性值正则匹配选择器：

javascript

document.querySelector('h2[class^="UserInfoBox_textEllipsis"]');

document.querySelector('h2[class^="UserInfoBox_textEllipsis"]');

使用属性值正则匹配选择器，关键记忆点有两个：

1）使用了中括号，直接用在元素选择器后面。在 JS 中，计算属性也是使用中括号，这种写法是一致的、合理的；

2）在中括号内，使用 k=v 形式书写，并且在 k 后面可以跟^、$、*三个正则符号，分别表示前匹配、后匹配和任意匹配。

🔰 使用 querySelector 查询元素时，如何使用正则进行模糊匹配查询？