These two regular expressions are equivalent. Both use PHP's flavor of PCRE. (The first one might actually work for other languages PCRE variants as well, I'm not sure.) Neither will work for Javascript--it's pretty impossible to tell, but the first one does still have the conditionals, etc., as the second one. Just, you know, illegibly.
You'll have to horizontal-scroll a decent amount on that first one, too. (And also hope you never, ever, ever need to make changes.)
(?:((?:const)|(?:var))|(?:function))\s+(\w+)(?(1)(?:\s*=\s*(?:(?:function)(?:\s*\w+)?)?)|(?=\s*\())\(([^\)]*)\)(\h*=>\s*)?((?s)\s*\{\s*(?-s))?(?(5)([\s\S]*?)return\s)((?:\V++$\v)?(?:^\h+\V+$\v)*)(?(5)^\};?)
and:
(?xm) # `x` is for ignore-whitespace + comments, `m` is for making ^ and $ match start/end of lines
# PHP-PCRE
(?(DEFINE) # open definitions block
# literals
(?<const> const )
(?<var> var )
(?<function> function )
# syntactic chunks -- things with more meaning than the symbol
(?<assignment> \s* = \s* )
(?<function_ending_curly_brace>
^ # the ^ sets us at the start of a line
\} # then our closing curly brace
;? # possibly a semicolon
\s* # eat up any whitespace.
)
# some human readable names
(?<line_end> $\v )
(?<rest_of_line> \V++ )
(?<line_start_with_whitespace> ^ \h+ )
) # end definitions block
^ # This pins us to the start of the line
(?:
# We can determine whether we need to worry about `=` by whether this is
# an expression -- `const blah = ...` or an expression `function Stuff`
(?<does_need_assignment>
\g<const>
|
\g<var>
) # close does_need_assignment capture
|
\g<function>
)
\s+
# This becomes the name of our final class
(?<name_of_component>
\w+
)
# We handle the values differently depending on if we are doing something of the
# form `function SomeComponent(...` vs `const SomeComponent = (...`
(?(does_need_assignment)
(?: # start does_need_assignment = true
\g<assignment>
(?: # We may have seen 'function', but maybe not
\g<function>
# If we got this far, we DID see the word `function`
# and that function might have a name
(?:\s*\w+)?
)?
) # end does_need_assignment = true
|
(?= \s* \( ) # 'function' parens after
) # end does_need_assignment conditional
# We're delimiting with parentheses here, and taking advantage of that by
# then just consuming everything until we hit a clothing parenthesis.
\( # opening parameters parenthesis
(?<props>
[^\)]*
)
\) # closing parameters parenthesis
(\h* => \s*)?
# We know this is an opening curly brace since we have it IMMEDIATELY after the
# arrow operator. If it weren't the braces for a method body, we would have had
# to have had a set of parentheses around everything.
(?<has_opening_curly_brace>
\s* \{ \s*
)?
(?(has_opening_curly_brace)
# If there is an opening curly brace, we *must* be doing an explicit return
# (if we're not, this won't compile as a render method anyways).
# If we're doing an explicit return, we might have other things in the body
# of the function that we don't want to return, though -- like variables, etc
# This lets us preserve those as their own group, so we can access it after.
(?<body>
[\s\S]*? # don't use . here! it's ~200 steps slower
)
return\s
) # end has_opening_curly_brace conditional
# This is our actual value being returned -- regardless of if we've used arrow syntax, or what.
(?<return_value>
(?:\g<rest_of_line> \g<line_end>)?
(?:\g<line_start_with_whitespace> \V+ \g<line_end>)*
)
# Finally, if we did open a function body, we need to close it.
(?(has_opening_curly_brace)
\g<function_ending_curly_brace>
) # end has_opening_curly_brace conditional