Writing Regex in JSX, without releasing Zalgo

  • You have to write this huge string of almost incomprehensible text
  • It’s very easy to make mistakes that only surface at runtime
  • It’s very easy to forget to escape special characters like . or $
  • It’s even harder to build regexes programmatically, if you have a lot of dynamic values you want to check for
  • It’s a lot easier to see how the Regex is structured, nested, and grouped
  • We use plain English parameters like ‘optional’, ‘name’ and ‘union’ to describe how it behaves, rather than single characters with very little semantic meaning
  • It’s no longer stringly-typed, and can be more easily statically checked with type-checkers like TypeScript or Flow.
  • It encourages you to name your regex groups, which is essential if you want to extract out matched groups from the strings you’re matching on (for example, extracting the email provider from an email string)
  • It’s super easy to automatically transform this down to a Regex string, if you’re worried about eating up a lot of bytes, and you don’t think you’ll ever be coming back to change it in future.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store