使用 querySelector 查询元素时，如何使用正则进行模糊匹配查询？
使用 querySelector 查询元素时，如何使用正则进行模糊匹配查询？
这要用到元素属性值正则匹配选择器，它包括下面 3 种：
- [attr^="val"] 前匹配
- [attr$="val"] 后匹配
- [attr*="val"] 任意匹配
其中，尖角符号^、美元符号$ 以及星号*都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。
由于现代网页源码都是编译过后的产物，发到用户浏览器中的源码经常有这样的元素节点：
<h2 class="UserInfoBox_textEllipsis_13jj5" f_c="8">点击登录</h2>其中，13jj5 并不是固定的，它是一串随机字符，是前端框架在编译时为了避免组件样式混淆而故意添加的。每一次产品重新发布，这个 class 样式便会变化一次。
如果我们在智能化产品中直接这样查询目标元素：
document.querySelector('h2.UserInfoBox_textEllipsis_13jj5')下次产品重发后，代码便不再有效了。这种情况便适合采用属性值正则匹配选择器：
document.querySelector('h2[class^="UserInfoBox_textEllipsis"]');使用属性值正则匹配选择器，关键记忆点有两个：
1）使用了中括号，直接用在元素选择器后面。在 JS 中，计算属性也是使用中括号，这种写法是一致的、合理的；
2）在中括号内，使用 k=v 形式书写，并且在 k 后面可以跟^、$、*三个正则符号，分别表示前匹配、后匹配和任意匹配。