JavaScript Regex Match Example – How to Use JS Replace on a String
Developers have been using text editors for a long time. And like most tools, all text editors have one feature in common: find and replace.
If you have been using find and replace for a while, you might know how useful this feature is. But most of us don't know that this tool is even more powerful than we realize.
It can not only replace plain strings, but patterns too. These patterns are known as Regular Expressions.
Regular expressions exist in JavaScript and most other programming languages. Regex (for short) are a very powerful tool to help you find simple as well as complex search patterns.
String-searching algorithms are also a significant branch of computer science. In this article we will learn how to use this amazing tool in JavaScript.
Why Regular Expressions?
You won't understand the real importance of Regular expressions until you are given a long document and are told to extract all emails from it.
You could do that manually, but there is a super fast method that can do it for you. Most modern text editors allow Regex in their Find option. It is usually denoted by .*
.
And that's not all regex can do – emails are just an example. You could search any type of string that follows a pattern, for example URLs or text between parentheses.
Regex can also be used to validate certain types of patterns, like validating Email. You could replace some long validation logic like this:
function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot < 2 || dotCount > 2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };
With a single line like this:function isValidEmail(email) { return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }
Though that regular expression looks scary, it's not something you have to remember. Once you understand how it works, it will be super simple to implement.JavaScript Regex MatchIn JavaScript, we have a match method for strings. This method can be used to match Regex in a string. This method is the same as the find method in text editors. It searches a given string with a Regex and returns an array of all the matches. The prototype of the match method is as follows:str.match(regexp)
This will return an array of all matches on searching string (str
) for regular expression (regexp
).A basic use of this method would be to count all words in a string. For example:var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5
We will learn about this \w+
regular expression later in this article. Using such regular expressions, we can perform various tasks which would otherwise require us to write tedious logic. An example was the email validation function. We have to test all criteria, but using regex you can simplify it.Regular expressions are valid in most string functions, but you should check the prototype of the function if you want to be sure. One such method is the Replace method. Let's learn more about it below.JavaScript Replace MethodJavaScript has a number of string utility functions. Replace is one of them. The prototype of the replace method is as follows:const newStr = str.replace(regexp|substr, newSubstr|function)
As you can see, the replace method acts on a string and returns a string. It takes two parameters: the string to be replaced and with what it will be replaced. The first parameter can be either a string or a regular expression. Here we can use the power of regular expressions to replace complex search patterns with some string.The second parameter could also be a function. To demonstrate it, let's check out an example:var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"
This example reverses every word in a string. So as you can see, replace combined with regex is a very powerful tool in JavaScript.The replace method can be useful if you want to replace a specific search pattern with some other string after some processing of the original string. It can also be used to correct an invalid match – for example to validate email and if possible, to correct invalid email.Now that we know how useful Regex is, let's learn some basic Regular expressions and search for strings.Basic Regular ExpressionsThough regular expressions are a vast topic, the basic ones are very simple to understand and remember. Let us try to understand some basic terms associated with Regular expressions.LiteralsA literal is any character which is evaluated as itself and not in any general form. Thus, word
is also a valid regular expression which will match only "word".If you want to replace all instances of a given word in JavaScript, you could do this:var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */
This replaces all occurrences of JavaScript with JS. We accomplished this using the g
identifier, which stands for global search. That is, it searches all occurrences rather than just the first one. There is also an i
identifier. It stands for case-insensitive search. It matches the string ignoring the case. Thus a literal can be used to match a specific character or group of characters.Meta-charactersA meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters: \d
matches any digit, that is, digits from 0 to 9 \w
matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9. \s
matches any whitespace Similarly, \D
, \W
and \S
match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d
would match any three digits in a row.QuantifiersA quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex: *
is used to match 0 or more occurrences of a given character. +
is used to match 1 or more occurrences of a given character. .
is used to match either no occurrence or 1 occurrence of a given character. {min,max}
or {n}
can be used to match a number of occurrences in a range or a given number of times n An example would be the one we used above to reverse every word in a string. \w+
matches every word in a string \w
matches any alpha-numeric character \w+
matches one or more occurrences of an alpha-numeric character, that is, every word in a string.We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"
There are plenty of other uses for quantifiers.Position meta-charactersThere are also position meta-characters which represent a position. For example ^
represents the start of a line, $
represents end of a line, and \b
represents word boundaries.ConclusionIn this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns. This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable. Now you can use your own creativity and make wonderful regex – so good luck with your new skill.This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io or my Github. Do check out my other articles. Thank you.