WWW Freecodecamp Org News Regular-Expressions-For-Javascript-Developers
WWW Freecodecamp Org News Regular-Expressions-For-Javascript-Developers
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
If you want to master regular expressions and understand ADVERTISEMENT
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Regular expressions can be intimidating when you first encounter them.
When I started learning to code, I gave up on regular expressions twice.
In fact, before some tutorials start teaching regex, they complain about
regex and how tough they can be. And there's no better way to discourage a
learner than that.
In this book, you won't just see how to use regex in a regex testing tool like
regexpal or regex101. You'll also see how they works in JavaScript. This is
what many courses and tutorials tailored for regex in JavaScript lack. As
you see how they work using a regex tester, you'll also see how they work in
JavaScript.
You can also apply what you learn in this book to other programming
languages like Python, PHP, and so on. All you need to do is to know about
how the regex engine of that language works. You'll also need to
understand the methods and functions the language uses for working with
regular expressions.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
To get the most out of this book, make sure you read it in order because
each chapter builds upon the previous ones. I have also arranged the
chapters according to how difficult they are. So, you will find simpler
concepts first and more advanced concepts later.
Happy reading!
Table Of Contents
Chapter 1: Introduction to Regular Expressions
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Character Set Matching
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
The Word and Non-word Metacharacters
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Chapter 7: Lookaround Groups: Lookaheads and Lookbehinds
Glossary of Terms
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Quick Reference of Metacharacters and Quantifiers
Because regular expressions are a powerful tool, you can use then to do
much more than just "matching strings" when you combine regex with
programming languages.
Almost all the main programming languages of the modern era have built-in
support for regular expressions. Some programming languages might even
have specific libraries that help you work more conveniently with regex.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Apart from using regular expressions in programming languages, other
tools that let you use regular expressions are:
Text Editors and IDEs: for search and search and replace in VS Code,
Visual Studio, Notepad++, Sublime Text, and others.
RegEx Testers: you can paste in text and write the regular
expressions to match them – which is a very good way to learn
regular expressions. This book explores that option quite a bit.
The concept gained further popularity when Thompson and Dennis Ritchie
created the Unix operating system in the early 1970s.
Grep allowed users to search files for specific patterns using regular
expressions. The simplicity and effectiveness of grep made it a widely
adopted tool. It also established regular expressions as a standard feature
in Unix-based systems.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
As computer systems and programming languages evolved, regular
expressions became integrated into various software development
environments. In the late 1970s, the AWK programming language was
created. AWK inspired Larry Wall to create Perl and make it available to the
public in 1987.
Wall recognized the value of regular expressions for text manipulation and
integrated regex into Perl.
With the rise of the internet and the World Wide Web in the 1990s, regular
expressions found widespread use in web development and data
processing. They became an essential component of many scripting
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
languages, providing developers with powerful tools for text processing,
form validation, and data extraction from web pages. ADVERTISEMENT
For example, JavaScript had always had a version of PCRE built in for
working with regular expressions. But by 1999, with the release of
ECMAScript, the RegExp() constructor was introduced. This gave
JavaScript developers the ability to start using regular expressions directly
in their code, in the JavaScript way.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
The history of regular expressions demonstrates their evolution from
theoretical concepts to practical tools that have revolutionized text
processing and pattern matching.
From the early developments at Bell Labs and Unix to their integration into
popular programming languages, regular expressions have become an
essential tool in the hands of developers and system administrators. Regex
empowers them to handle complex text-based tasks efficiently.
Those applications and uses include but are not limited to the following:
String Matching: This is one of the most common ways developers use
regular expressions. This is also a good way to learn regular expressions.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
You can paste some texts into a regex engine and write the regex to match a
part of the text or the whole text. You can also search for strings that
contain specific character sequences, start or end with certain characters,
or match complex patterns.
This makes regular expressions valuable for tasks like searching for
keywords, validating input against specific patterns, or filtering data based
on string patterns
ADVERTISEMENT
Password Strength Validation: You can use regular expressions for
validating the strength of passwords in websites and applications.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
codes, or other inputs, regular expressions can help you enforce validation
rules and maintain data integrity.
Working with URLs and URIs: Since URLs and URIs are an integral part of
web development, regular expressions can help in validating, parsing, and
manipulating them. This enables developers to ensure the correctness and
structure of web addresses, validate whether a string is a valid URL, and
help extract specific components such as the domain, path, query
parameters, or fragments.
Search and Replace in IDEs and Text Editors: Regular expressions offer
sophisticated search capabilities. This enables developers to locate specific
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
patterns (such as words with specific prefixes or sequences of characters)
and then replace the matches with a specified text. This is built into modern
text editors like VS Code and Notepad++.
They are also valuable when extracting data from sources like HTML or
XML documents, as they enable efficient retrieval of information based on
defined patterns.
specific constructs.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Flavors of Regular Expressions
The term "flavors of regular expressions" refers to the specific
implementation and syntax variations of regular expressions in different
programming languages, libraries, or tools.
While the core concept of regular expressions remains the same, the details
of how regular expressions are written and interpreted can vary between
different environments.
Each flavor of regular expressions may have its own set of metacharacters,
syntax rules, and additional features beyond the basic functionality.
These differences can include variations in the syntax for character classes,
metacharacters, capturing groups, and assertions, as well as additional
capabilities like named capturing groups, look-ahead, and look-behinds.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Extended Regular Expressions (ERE): ERE is an extension of BRE. It
provides additional metacharacters and features. In addition to the
metacharacters available in BRE, ERE introduces features like
grouping with parentheses ( ( ) ), alternation with the pipe symbol
( | ), and the use of curly braces ( {} ) to specify repetition ranges.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
? ), and capturing groups ( ( ) ). The re module also has a unique ADVERTISEMENT
It's important to be aware of the flavor of regular expressions you are using
when working with regular expressions in different programming languages
or tools. This ensures that you use the correct syntax and take advantage of
any unique features or capabilities provided by that particular flavor.
There are many tools available for working with regular expressions. Let me
take you through them under regex testers, programming languages,
libraries, text editors and IDEs, and command line tools.
RegEx Testers
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
RegEx testers are the online testing environments specifically built for
creating and testing regular expressions against some test strings.
Examples include regex101.com, regexr.com, and regexpal.com.
The UIs of these regex testers usually have an input for the regular
expressions you want to write, and another for the text you want to test the
regex against.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
More advanced ones like regex101.com let you select the flavor of regular
expressions you want to work with, an explanation of the regex, and match
information.
ADVERTISEMENT
One of the good things about these online regex testers is that they are
helpful for learning regular expressions. A lot of them provide real-time
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
matching and cheatsheets you can quickly look at. Many devs who use
regex have used them.
Apart from learning, you can also use them by creating your regex with
them and pasting them into wherever you want to use the regex. This is
how I create my regex.
Programming Languages
Almost all modern programming languages have built-in support for regular
expressions. And so they all have methods for creating and testing regular
expressions.
For example, JavaScript has the RegExp() constructor for working with
regular expressions, Python has the re module, Java has the
java.util.regex package, and Perl has regex built into it directly.
The commonest thing developers use this for is search, and search and
replace. Also, the syntax highlighting in those text editors and IDEs is often
implemented with regular expressions.
ADVERTISEMENT
Using these Unix tools, options for customizing search behaviors and
customizing complex text transformations are also available to you.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
This includes concepts like literal characters, metacharacters, quantifiers,
character classes, anchors and boundaries, and escape characters. The
more advanced ones are groupings, backreferences, look-ahead
assertions, and look-behind assertions.
This book won’t leave any of the concepts behind. I will show you how you
can utilize them in regex testers and how you can use them in JavaScript
since that’s what this book is meant for.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
This means if you want to match literal characters, you should construct
your regex pattern in the same way as the test string appears.
For example, if you want to match the word hello , your regex pattern can
be hello . And if you want to match the h in the word hatch , all you need
as the pattern is h .
This h would match the first occurrence of the letter h in the test string
hatch . If you want it to match the other letter h as well, you need the "g"
flag, or global flag. You will learn about the flags and modifiers in the next
chapter of this book.
That is not the case for some symbols, though. That’s because some
symbols are special characters of regular expressions (metacharacters and
quantifiers). So, if you want to match those characters, you have to escape
them with a backslash ( \ ). This book will also teach you all you need to
know about metacharacters because there's a whole chapter for them.
ADVERTISEMENT
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
If you want to match the text freeCodeCamp , you can construct your regex
to be freeCodeCamp :
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
So, what if you want to match hello freeCodeCamp ? Then you just use
hello freeCodeCamp as the pattern:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
ADVERTISEMENT
If you want to match the letter e in the text freeCodeCamp , e is the pattern
to use:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
And if you want to match h in the text hatch , h is the pattern you should
use:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
ADVERTISEMENT
You can see that in the text freeCodeCamp , the other e s after the first
occurrence were not returned as matches – same with the last h in the
word hatch . You will learn how to match every occurrence of a letter in a
text in the next chapter.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
For instance, the pattern [abc] will match any of a , b , and c , while [xyz]
will match any of x , y , and z .
Here are some examples of character sets and what they do:
You will also learn about ranges in this book. On some occasions, a
backslash \ does not lose its special meaning in a character set.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
In the next chapter, you will learn how to match multiple occurrences of a
character with the g flag.
Here’s how each of the above character sets works in a regex testing tool:
[abc] :
[aeiou] :
ADVERTISEMENT
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
[a-z] :
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
[A-Z] :
[0-9] :
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
You can also define your unique character class based on what you want.
Character sets are useful when you want to match some characters in a
particular position in a text. ADVERTISEMENT
For instance, the pattern br[ao]ke will match both brake and broke :
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
N.B.: I turned on the g flag so you can see all the matches, and how
powerful character sets are. We will take a look at the g and other flags in
the next chapter.
Since there are always multiple ways of doing the same thing in
programming, there are also certain character sets called "shorthand
character sets" that you can use instead of character sets.
In Python, you can place flags within a regex pattern, but in JavaScript, flags
are always placed at the end of the regex pattern.
multi-line flag
single-line flag
unicode flag
sticky flag
In many regex engines, you can turn on any flag you want to use. In
regex101.com, you can turn on a flag by clicking on the slash symbol ( / )
right inside the pattern input:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
You can then select any flag you want to use:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
N.B.: If the flavor of regex you selected in regex101.com is not ECMAScript, ADVERTISEMENT
If you are using regexpal.com, click on "flags" above the regex pattern input:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Select any flag you want by clicking on it:
Now, let's take a detailed look at each of the regex flags and how they work
in a regex engine.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
The global Flag
The global flag is denoted by the letter g . With it, you get to perform a
global match with your pattern.
Another good thing about using the g flag is that you can iterate over the
matches you get with the pattern in JavaScript. The iteration continues
until there’s nothing to match. You will learn about multiple ways you can
iterate over matches soon.
To let you see how the g flag works, I’ll use the hatch and freeCodeCamp
examples from the previous chapter.
If you want to match the letters h in the word hatch with the pattern h ,
both the first and the last h s will be returned as matches as long as you
have the g flag on:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
ADVERTISEMENT
And if you want to match e in freeCodeCamp with the pattern e and you
turn on the g flag, the second and third e s are returned as a match too:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
The case-insensitive Flag
The case insensitive flag is denoted by i . As the name implies, it lets you
perform case-insensitive matching.
With this, uppercase or lowercase will be ignored. That means Hello and
hello will be treated as the same thing:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
ADVERTISEMENT
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Another thing is that if you’re using a character class, for example [a-z] , it
would match uppercase letters too if you turn on the case-insensitive
flag.
So, the pattern [a-z] also matches uppercase letters with the case-
insensitive flag turned on:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
$ ), you’ll learn more about it under the anchors and word boundaries
chapter.
The single-line flag is denoted by s . Just like the multi-line flag, the
single-line flag also works with a metacharacter called the wildcard ( . ).
You will see the single-line flag in action under the chapter for
metacharacters.
For example, the escape sequence \u{1F602} will match the literal
character u{1F602} if you don’t turn on the u flag:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
But if you turn on the u flag, the same pattern matches the face with tears
emoji:
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
That is one way to match emojis and other Unicode characters. Take the
Unicode of the emoji and put the hexadecimal in curly braces, then precede
the two with \u .
For instance, the Unicode of growing heart is U+1F497 , the pattern to match
it would be \u{1F497} :
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
ADVERTISEMENT
You will see more examples of how the flag works in the chapter on how to
use regular expressions in JavaScript.
When you use the y flag, it uses the lastIndex property to determine
where the next search will start. The pattern matches only if it occurs
exactly at the lastIndex position or at the beginning of the string.
PDFmyURL converts web pages and even full websites to PDF easily and quickly.
Unlike the global ( g ) flag, the y flag does not find all matches but stops
after the first successful match.
In a regex engine like regex101.com, the y flag usually anchors to the start
of the test string and stops there:
Since the y flag typically works with the lastIndex property of JavaScript
regular expressions, we will look at more examples in the chapter on how to
use regular expressions in JavaScript – specifically when we look at the
sticky of the regular expressions constructor.
You can also combine multiple flags to write more complex syntax. For
example, you can use the g flag with the i flag for global and case-
PDFmyURL converts web pages and even full websites to PDF easily and quickly.