Demystifying Regular Expressions with JavaScript

Demystifying Regular Expressions with JavaScript livecodestream.dev2 years ago in #Dev Love41

Let’s make regular expressions less scary together The first time I encounter a regular expression was many years ago, but I still remember my first thoughts on it: What is this string-like thing? I rather don’t touch it, looks scary I don’t remember quite well what that regex was doing, or how exactly looked like, but it scared me to death. Looking in retrospective I realize that it was probably not scary at all and that in fact, it was an easy way to solve the problem in hand. But why did I got this feeling? It’s just the awkwardness of the syntax, they certainly look strange, and if you don’t know what they are, they look very complicated. My intention here is not to scare you out, regex can be simple once we understand them, but if you don’t and you look at something like this: ^(*d{3})*( |-)*d{3}( |-)*d{4}$ Can be intimidating… Today we are going to demystify regular expressions, we will see what they are, what they are useful for, and how you can design your regular expressions to solve problems. What are regular expressions Regular expressions are a way to describe patterns in data strings. They have their own syntax, as is they are their own programming language, and there are methods and ways to interact with regular expressions in most (if not all) programming languages. But what kind of patterns are we talking about? common examples of regular expressions determine for example if a given string is an email address or a phone number, or they can be used to verify if a password fulfills a certain complexity. Once you have the pattern, what can you do with the regular expressions? validate a string with the pattern search within a string replace substrings in a string extract information from a string Working with regular expressions For this article, we are going to cover how to work with regular expressions in JavaScript, though the concepts learned here apply to other languages as well. With that said, in other languages, there may be some differences in the way they treat regular expressions. Let’s look at an example that will validate if the string contains the word Hello or not. In JavaScript there are 2 ways to going about this: Constructor Literal Constructor const regex = new RegExp(‘Hello’) const result = regex.test(‘Hello World!’) console.log(result) ————– Output ————– true Literal const regex = /Hello/ const result = regex.test(‘Hello World!’) console.log(result) ————– Output ————– true In both scenarios, the variable regex is an object, which exposes different methods we can use to interact with the regular expression. However, the first example has a more familiar look, instancing an object with a string as a parameter. In the second scenario things look a bit weird, there is something that resembles a string but instead of quotes is wrapped in /. As it turns out both ways represent the same, I personally like the second option, which is very clean, and IDEs or code editors can have syntax highlighting on the regular expression compared to the first scenario where the regular expression pattern is defined just as a string. So far our regular expressions have been fairly simple, is just the exact match on the string Hello and it worked perfectly for JavaScript, however the result we obtained can be different for other languages,  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply