正则匹配选择器
© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0
| 符号 | 作用 | 说明 |
|---|---|---|
| ^ | 匹配开始字符(串) | 开始位置包含相应字符(串) |
| $ | 匹配结束字符(串) | 结束位置包含相应字符(串) |
| * | 匹配任意位置 | 任意位置包含相应字符(串) |
| ~ | 匹配单词，仅支持 ASCII 字符 | 任意位置包含相应单词(单词之间需要有空格或者分隔符) |
| | | 匹配开始单词，仅支持 ASCII 字符 | 以相应单词开始(单词之间需要有空格或者分隔符) |
| g | 全局匹配 | |
| i | 不区分大小写 |
^ 匹配开始字符(串)
/* attr: 匹配 name 属性值以 blog 开始 */
div[name^='blog']
/* class: 匹配类名以 blog 开始 */
div[class^='blog']
$ 匹配结束字符(串)
/* attr: 匹配 name 属性值以 blog 结尾 */
div[name$='blog']
/* class: 匹配类名以 blog 结尾 */
div[class$='blog']
* 匹配任意位置
/* attr: 匹配 name 属性值中包含 blog */
div[name*='blog']
/* class: 匹配类名中包含 blog */
div[class*='blog']
~ 匹配单词
/* attr: 匹配 name 属性包含单词 blog */
div[name~='blog']
/* class: 匹配类名包含单词 blog */
div[class~='blog']
/* 能够匹配 'blog','my-blog-name','my blog name', 但不能匹配 'blogname' */
| 匹配开头单词
/* attr: 匹配 name 属性以 blog 开始 */
div[name|='blog']
/* class: 匹配类名以 blog 开始 */
div[class|='blog']
/* 能够匹配 'blog','blog-name','blog name', 但不能匹配 'blogname' */
i 不区分大小写
/* attr: 匹配 name 属性以 blog 开始 */
div[name*='blog' i]
/* class: 匹配类名以 blog 开始 */
div[class|='blog' i]
/* 能够匹配 'blog','Blog-name','blog Name', 但不能匹配 'blogname' */
注意事项
使用正则匹配选择器时，是将整个 class 属性（或其他属性）的值作为字符串进行匹配的，例如：
/* class="ant-tag ant-tag--selected" 匹配 */
/* class="ant-tag--selected ant-tag" 不匹配 */
div[class^='ant-'][class$="--selected"]