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

你好，今天聊一个简单的技术问题，使用 querySelector 方法查询网页上的元素时，如何使用正则进行模糊匹配查询？

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

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

document.querySelector('h2.UserInfoBox_textEllipsis_13jj5')

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

代码语言：javascript复制

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

最后，回顾一下，使用属性值正则匹配选择器，关键记忆点有两个：

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

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

这是一个很小很简单的知识点，但是很有用，特别当你使用 playwright 编写智能数字化的爬虫应用时，特别在处理使用 Vue 或 React 框架开发的工程化 Web 应用时，就会发现它的用途了。

作者推荐

0 人点赞