javascript - RegExp to find React Components with specific properties on them - Stack Overflow

admin管理员组

文章数量:1393843

I'm trying to find a perfect RegExp to find React ponents 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 ponent 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 ponent has so many props that the pany 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 ponents 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 ponents, 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 ponents has other properties that have a > inside, like arrow functions and ponents 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

I'm trying to find a perfect RegExp to find React ponents 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 ponent 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 ponent has so many props that the pany 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 ponents 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 ponents, 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 ponents has other properties that have a > inside, like arrow functions and ponents 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

• javascript
• reactjs
• regex
• visual-studio-code

Share Improve this question Follow edited Nov 5, 2021 at 17:38 buondevid asked Nov 5, 2021 at 16:55 buondevidbuondevid 74855 silver badges1010 bronze badges 3

• 2 You might try something like <Button\b[^<>\r]*(?:(?<==)>[^<>\r]*)*size=[^<>]*(?:(?<==)>[^<>\r]*)*> but this will break when there are other < > inside regex101./r/VnLed8/1 – The fourth bird Commented Nov 5, 2021 at 20:39
• @Thefourthbird impressive! It actually solves the arrow functions problem and works pretty well. What about a ponent prop like <Button type={<Icon />} 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 <Button> ponent. The only thing is that we meet another opening <, so that will mean that I'm gonna match not the first > but the second >, but it's a bit hard to put in RegExp. – buondevid Commented Nov 5, 2021 at 21:01
• 1 That is why it is very hard to do that, see this page stackoverflow./questions/1732348/… – The fourth bird Commented Nov 5, 2021 at 21:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 ponent with the size property, its not perfect but got the work done for me.

The other answer: https://stackoverflow./a/76651729/2809729 is almost correct except that it may get stuck if the optional chaining operator ? gets used.

So this one improves on the other:

<Component[ \w=\{\}>\(\)\n;?".-:]*prop

That appears to be working also in subtle situations, like when you have a prop containing an arrow function using the ?

<Component
 value="lol"
 onChange={ onChange?.(""); }}
 prop={"test"}
/>

本文标签： javascriptRegExp to find React Components with specific properties on themStack Overflow