RegExp 用于查找具有特定属性的 React 组件

Question

我正在尝试找到一个完美的正则表达式来查找具有特定属性的 React 组件。RegExp 必须在我的 IDE VSCode 的搜索字段中使用。

组件示例：<Button>

属性示例：size

单行上的组件

如果组件的开始标签在一行上，我发现完美运行的正则表达式是这样的（VSCode 中不允许使用标志）：

/<Button.+size/

例如，这将匹配直到结束size：

<Button onClick={()=>{}} size='medium'>

多行组件

有时，组件有太多 props，以至于公司代码风格希望将其拆分为几行，每行 1 个属性，如下所示：

<Button
    type="button"
    size="tiny"
    className={styles.pauseButton}
    onClick={togglePaused}
    title="Pause or enable automatic loading of webhook requests in the debug console."
>

我无法编写正则表达式来匹配这些特殊情况：

1. 是否有一个正则表达式适用于这两种情况（并且不匹配其他任何内容）？
2. 如果这两种情况都不存在一个正则表达式，是否有一个正则表达式仅匹配其左/右括号之间具有特定道具的多行组件？

我尝试过的

我已经尝试过，/<Button[\s\S]*?size[\s\S]*?>/但它比没有 size 属性的情况更匹配，因此它将保持匹配，直到在某处找到 size 单词。

目前我正在使用/<Button[\n]/它匹配所有且仅匹配拆分组件，然后我必须手动检查它们是否具有特定属性。我仍然更喜欢仅与特定属性的分割相匹配的正则表达式。

我也发现了这个很好的答案，但是如果组件具有>内部的其他属性（例如箭头函数和组件作为道具），它就会中断。这可能是一个很好的起点。正则表达式的答案是： <Component(\s|\n)[^>]*?property

可能是有lookaheads的东西，但我经验不够......

谢谢

Answer 1

对于任何有同样问题并想要快速修复的人来说，这里是我发现适用于多行的正则表达式。我在反应代码上使用了它。

<Button[ \w=\{\}>\(\)\n;".-:]* size

我用它来查找任何具有 size 属性的 Button 组件，它并不完美，但为我完成了工作。