4

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

buondevid
  • 347
  • 2
  • 7
  • 2
    You might try something like ` – The fourth bird Nov 05 '21 at 20:39
  • @Thefourthbird impressive! It actually solves the arrow functions problem and works pretty well. What about a component prop like `} size="tiny" className={styles.pauseButton} onClick={togglePaused} title="Pause or enable automatic loading of webhook requests in the debug console." >` I can't figure out how to differentiate that > with the one actually closing the – buondevid Nov 05 '21 at 21:01
  • 1
    That is why it is very hard to do that, see this page https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454 – The fourth bird Nov 05 '21 at 21:06

1 Answers1

2

For anyone having the same issue and want a quick fix here is a RegExp I found that works for multi line. I used this on a react code.

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

I used this to find any Button component with the size property, its not perfect but got the work done for me.

Satanic-devil
  • 21
  • 2