如何用正则在VSCode中匹配带指定属性的单行/多行React组件

1. 通用兼容单行/多行的正则（无过度匹配） #

存在可同时适配单行、多行组件，且不会出现跨组件过度匹配的正则，写法如下（以匹配携带size属性的Button组件为例）：

<Button(?:[^>'"]|'[^']*'|"[^"]*"|\{(?:[^}]*|\{[^}]*\})*\})*?size

匹配逻辑说明 #

• 开头的<Button精准匹配目标组件的标签起始部分
• 中间的非捕获分组(?: ... )*?为惰性匹配，只会在当前组件的起始标签范围内扫描，不会跨到其他标签：
  • [^>'"]：匹配所有非标签闭合符>、非引号、非大括号起始的普通字符，包括换行、空格、属性名
  • '[^']*' / "[^"]*"：匹配单/双引号包裹的属性值，内部的任意字符（包括>、特殊符号、换行）不会被误判为标签结束
  • \{(?:[^}]*|\{[^}]*\})*\}：匹配大括号包裹的属性值（支持两层大括号嵌套，覆盖箭头函数、style对象、子组件作为属性传入等场景），内部的>不会触发标签结束判断
• 末尾的size为你要查找的目标属性名

如果需要匹配完整的组件起始标签，可在正则末尾补充(?:[^>'"]|'[^']*'|"[^"]*"|\{(?:[^}]*|\{[^}]*\})*\})*>即可。

2. 仅匹配多行组件的正则 #

如果仅需要查找属性拆分多行写的组件，只需要在标签名后增加换行匹配限定即可：

<Button\n(?:[^>'"]|'[^']*'|"[^"]*"|\{(?:[^}]*|\{[^}]*\})*\})*?size

使用说明 #

需要查找其他组件、其他属性时，直接替换正则中的Button（目标组件名）和size（目标属性名）即可，比如查找携带disabled属性的Input组件，正则改为：

<Input(?:[^>'"]|'[^']*'|"[^"]*"|\{(?:[^}]*|\{[^}]*\})*\})*?disabled

使用时请确保VSCode搜索框的正则表达式开关（.*图标）处于开启状态。

内容的提问来源于stack exchange，提问作者buondevid