This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1181583499112976384
1.
Regular expressions find parts of a string that match a pattern
In JavaScript they're created in between forward slashes //, or with new RegExp()
and then used in methods like match, test, or replace
You can define the regex beforehand, or directly when calling the method
2.
Match individual characters one at a time,
or put multiple characters in square brackets [] to capture any that match
Capture a range of characters with a hyphen -
3.
Add optional flags to the end of a regex to modify how the matcher works.
In JavaScript, these flags are:
i = case insensitive
m = multi line matching
g = global match (find all, instead of find one)
4.
Using a caret ^ at the start means "start of string"
Using a dollar sign $ at the end means "end of string"
Start putting groups of matches together to match longer strings
5.
Use wildcards and special escaped characters to match larger classes of characters
. = any character except line break
\d = digit
\D = NOT a digit
\s = white space
\S = any NON white space
\n new line
6.
Match only certain counts of matched characters or groups with quantifiers
- = zero or more
- = one more more ? = 0 or 1 {3} = exactly 3 times {2, 4} = two, three, or four times {2,} = two or more times
7.
Use parens () to capture in a group
match will return the full match plus the groups, unless you use the g flag
Use the pipe operator | inside of parens () to specify what that group matches
| = or
8.
To match special characters, escape them with a backslash \
Special characters in JS regex are: ^ $ \ . * + ? ( ) [ ] { } |
So to match an asterisks, you'd use:
\*
Instead of just *
9.
To match anything BUT a certain character, use a caret ^ inside of square brackets
This means ^ has two meanings, which can be confusing.
It means both "start of string" when it is at the front of a regex, and "not this character" when used inside of square brackets.
10.
Regexs can be used to find and match all sort of things, from urls to filenames
HOWEVER! be careful if you try to use regexs for really complex tasks, such as parsing emails (which get really confusing, really fast), or HTML (which is not a regular language, and so can't be fully parsed by a regular expression)
There is (of course) much more to regex like lazy vs greedy, lookahead, and capturing
but most of what web developers want to do with regular expressions can use just these base building blocks.
I'm already writing a follow up post with a bunch of real world regex use cases 🎉
Like this post?
Find more on twitter: @chrisachard
Or join the newsletter 📬 https://chrisachard.com/newsletter/
Thanks for reading!
Latest comments (36)
This is such an awesome post. Thank you so much. There is also one for Java dev.to/codechunker/introduction-to...
This was the best intro guide to regex I could find, thank you!
Awesome! Glad I could help 😃
Thank you! I've learned a lot from this post. :)
Very useful summary.
Regex has always been something which is hard to grasp(atleast for me)....
This post proves it to be wrong.
Excellent Post Chris.
Thanks✌️
Glad it could help!
Yeah, it's often disheartening to see really complex regexes and get totally lost... but just a few basics can get you pretty far!
I still get lost in really complex regexes though 😂 especially when they start involving capturing groups or lookahead, etc.
Nice job! Helped a lot!
;)
Great building up of the level of the regex's!
I kinda started my regex knowledge from regular-expressions.info/, the guys that also made RegexBuddy. Very detailed and with a lot of simple examples.
And if you really want to get a feeling for regex's, try regexcrossword.com/.
Thanks for the extra resources!
Great read Chris!
One resource I found super useful, once I dove into regexes more was the Mastering Regular Expressions book. I have the 2nd edition, but there appears to be a 3rd edition out.
Looking forward to your next post!
What a great post. I am saving this for the future and sharing it with my colleagues. Thank you!
This is the best REGEX explanation + examples I have ever came across on the web!
Thank you!!
Awesome! Glad to hear it 😃
Very nicely explained. First time to understand what Regex is about. Thanks.
Just a note, under part 8, your escape sequence seems to have been escaped into just a single *, so its missing the backslash now.
Oh, whoops! Good catch... turns out markdown will take \* as an escaped *, so I needed double backslash there. Thanks!
This is what i always wanted <3. Tried hard in the past to understand regex and this did the work!
Great! Glad it helped 😄
I like Regex since I tried to create a validator for checking my identity card in my country back in the day.
I think it is worth to mention that there are multiple variants of Regex implementations like the one in Perl, Linux or PHP I think.
Thus it depends on the developer. It might make sense to adopt certain variant of Regex to get what you need.
Yes, that's a good point. The major points are the same across languages, but there are some differences (how the flags behave for example) - so if you're using the more advanced features, then watch out for cross language differences.
I'm glad I found this one. Finally it's possible for everyone to understand regex :D I like your summary, Chris.
I can recommend this tool/website for testing and building regex. It helped me a lot: regex101.com/
Great! Glad it helped.
That's a nice site - thanks for the link!