Pretty-Print regexes with spacing for readability

[BobPritchett]

Feature

Without changing the text of the regex, use CSS to make it more readable by putting space around nesting group parenthesis.

No space at the closest group, more space further out. Half-spaces around |. So

(I (saw|want) a (((big|small) ((cat|dog)s?))|((loud|quiet) ((car|motorcycle))).)

is shown more like

(   I (saw | want) a   ( (  (big | small)   ( (cat | dog) s?)  )  |  ( (loud | quiet)   ( (car | motorcycle) ) )  \.   )    

With the little dots for whitespace and paired colors for parenthesis this could be much easier to read.

[firasdib]

Feel free to implement this and I can integrate it.

[OnlineCop]

Should this work only for text containing the /x (eXtended) flag where whitespace is ignored?

If the TEST STRING were "Hello world" and the pattern were /(\w+) (\w+)/ where the space is significant, how should that be rendered?

In PCRE and PCRE2 where (? and (* indicate that some group will be specialized, it is an error to separate those as ( ? or ( *. What would the rule be in order to separate some characters from others without breaking any functionality?

Examples:

• (?>atomic)
• (?(DEFINE)(?P<def1>.*)(?<def2>.+))
• (*SKIP)(*F)

[BobPritchett]

My inclination would be that when the /x flag is on all whitespace is ignored, so you could split ( ? or ( ? > with spaces or even across lines... I tried RegexBuddy, and it allows: ( ?<group>

but does not allow

( ? <group>

I guess you want to be compatible with /x syntax where it's supported, but it would be nice to allow this pretty-printing layout for JavaScript regexes too -- just letting you switch to a 'collapsed' view with all spaces and newlines removed for copy/pasting.

RegexBuddy's view with newlines and spaces:

[firasdib]

Dup of https://github.com/firasdib/Regex101/issues/1283