I'm trying to find a perfect RegExp to find React components with specific properties on them. The RegExp has to be used in the search field of my IDE VSCode.

Component example: <Button>

Property example: size

Component on a single line

In case the opening tag of the component is on one single line, the RegExp I found that works perfectly is this (flags are not allowed in VSCode):

/<Button.+size/

For example this will be matched until the end of size:

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

Component on multi-line

Sometimes the component has so many props that the company code style would want it to split it on several lines, 1 property per line, like this:

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

I can't manage to write a RegExp to match these particular cases:

1. Is there a single RegExp working for both cases (and not matching anything else)?
2. In case one single RegExp doesn't exists for both cases, is there a RegExp to match only multi-line components with a specific prop in between its opening/closing bracket?

What I've tried

I've tried with /<Button[\s\S]*?size[\s\S]*?>/ but it overmatches cases where there is a without a size property, so it will keep matching until it find a size word somewhere.

At the moment I'm using /<Button[\n]/ which matches ALL and ONLY the split components, and then I have to manual check if they have the specific property on them. I'd still prefer a RegExp that match the split with the specific property only.

I also found this nice answer too, but it breaks if the components has other properties that have a > inside, like arrow functions and components as props. This could be a good base to start from tho. The RegExp answered is: <Component(\s|\n)[^>]*?property

Probably it's something with lookaheads, but I'm not experienced enough...

Thanks