![\"\"](\"https:\/\/icrowdnewswire.com\/wp-content\/uploads\/2020\/06\/4001-logo.png\"){kind=logo}
<\/p>\n<\/p>\n
![\"Javascript](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Copy-of-Copy-of-Copy-of-Copy-of-Copy-of-Copy-of-...-2-1-796x417.png\")
<\/p>\n
The first time I ever encountered a regular expression was many years ago now, but I still remember my first thoughts on it:<\/p>\n
I don’t remember quite what that regex was doing, or how exactly it looked like, but it scared me to death. In hindsight, I now realize that it wasn’t actually that scary after all. In face, it was an easy way to solve the problem in hand. But why did I ever feel this way? 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.<\/p>\n
My intention here is not to scare you because regex can be simple. But if you don’t understand regex just yet, it could look a little daunting, like this example below:<\/p>\n
<\/p>\n <\/p>\n In this article, I’m going to demystify regular expressions. I’ll tell you what they look like, what they’re used for, and howyou can design your regular expressions to solve problems.<\/p>\n 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.<\/p>\n 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.<\/p>\n Once you have the pattern, what can you do with the regular expressions?<\/p>\n I’m also 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.<\/p>\n Let’s look at an example that will validate if the string contains the word In JavaScript, there are two ways to find this out:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n In both scenarios, the variable So far, our regular expressions have been fairly simple, it’s just the exact match on the string When working with regular expressions we’re basically working with the RegExp object methods, or with string methods which allow us to interact with regular expressions.<\/p>\n The Here’s an example. First, see if the specified string contains the string <\/p>\n <\/p>\n The Example<\/strong>: Look for all the instances of <\/p>\n <\/p>\n The Example<\/strong>: Find all the capital letters on a string:<\/p>\n <\/p>\n <\/p>\n The Example<\/strong>: Find occurrences of a string in groups:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n The Example<\/strong>: Find the position of any character that is not a word character or white space:<\/p>\n <\/p>\n <\/p>\n The Note that the original string will remain unchanged.<\/p>\n Example<\/strong>: Replace the word dog with monkey:<\/p>\n <\/p>\n <\/p>\n Not to be mistaken here, the method replace() uses regular expressions, so even when we pass a string, it will be interpreted as a regular expression and executed as such. Hence the reason why on the second console.log the word dog got replaced only once. But we will cover more on that later.<\/p>\n The Example<\/strong>: Replace the word ‘dog’ with ‘monkey’:<\/p>\n <\/p>\n <\/p>\n It’s similar to our previous example, but now we replace all the matches. I usually avoid this function as I can always do it with regular expressions and using the replace() function plus is a function that’s not supported in all platforms\/browsers.<\/p>\n The Example<\/strong>:<\/p>\n <\/p>\n <\/p>\n Now that we know how to work with regular expressions and the different methods that are available to interact with, let’s spend some time building regular expressions to match the patterns we want.<\/p>\n This will match <\/p>\n <\/p>\n If you want to match strings that end with <\/p>\n <\/p>\n You can also combine them to find exact matches as seen below:<\/p>\n <\/p>\n <\/p>\n To find strings with wildcards in the middle you can use <\/p>\n <\/p>\n Once very cool feature of regular expressions is the ability to match by character or numeric range. But, what do I mean by range? Well, it’s something that looks like this:<\/p>\n <\/p>\n <\/p>\n These type regex patterns will match when at least one of the characters in the range matches:<\/p>\n <\/p>\n <\/p>\n You can also combine ranges:<\/p>\n <\/p>\n <\/p>\n We saw that the <\/p>\n <\/p>\n There are special characters in regular expressions, some of them include:<\/p>\n If you want to search one string or another, use the | operator:<\/p>\n <\/p>\n <\/p>\n Quantifiers are special operators, here are some of them:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n As we saw already, there are certain characters which have a special meaning, but what if we want to match with of those characters? It’s possible to escape special characters with, let’s see an example:<\/p>\n <\/p>\n <\/p>\n Using parentheses, you can create groups of characters: <\/p>\n <\/p>\n You can also use the qualifiers (like the repetition or the optional qualifier) for a group:<\/p>\n <\/p>\n <\/p>\n Groups are also very interesting, especially when used with functions like Example with <\/p>\n <\/p>\n Example with <\/p>\n <\/p>\n With ES2018 it’s now possible to assign names to groups, so that working with the results is much easier. Now, take a look at the following example without naming groups:<\/p>\n <\/p>\n <\/p>\n Now using named groups:<\/p>\n <\/p>\n <\/p>\n As we saw in the constructor example, regular expressions have some flags which change the behavior for the matches:<\/p>\n Flags can be combined, and in the case of regex literals they’re set at the end of the regex:<\/p>\n <\/p>\n <\/p>\n Or using the constructor as a second parameter of the function:<\/p>\n <\/p>\n <\/p>\n That was a lot, enough with that, let’s see some cool examples:<\/p>\n <\/p>\n <\/p>\n This checks a password’s strength, and it’s especially useful if you want to build your own password validator. I know this is subjective, as different services may have different needs, but it’s a great place to start.<\/p>\n <\/p>\n <\/p>\n This is probably one of the most famous cases for regular expressions, validating email addresses.<\/p>\n V4:<\/p>\n <\/p>\n <\/p>\n V6:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Regular expressions are a very powerful feature, that can be intimidating at first. But once you get the hang of them, they’re pretty cool. Today we learnt what they are, how to use them, and how to build them and some cool examples. I hope the next time you see one of them in your projects you don’t run away (like I did), and you try to understand it and work with it.<\/p>\n Tags:<\/b> LIVE CODE STREAM<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-2.58.49-PM-1.png\")
<\/figure>\nSo, first. What are regular expressions?<\/h2>\n
\n
Working with regular expressions<\/h2>\n
Hello<\/code> or not.<\/p>\n\n
Constructor<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.03.07-PM.png\")
<\/figure>\nLiteral<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.03.17-PM.png\")
<\/figure>\nregex<\/code> 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<\/code> as a parameter. In the second scenario things look a bit weird, there’s something that resembles a string<\/code> but instead of quotes is wrapped in \/<\/code>. 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 as just a string.<\/p>\nHello<\/code> and it worked perfectly for JavaScript. However the result we obtained can be different for other languages, even though the regular expression is the same. This is because each programming language can define certain defaults or special behaviors in their regular expressions which can vary from one to another. So sorry about that, but that’s just how it is. When we build a RegEx though, for the most part, it will be the same in most programming languages. Before you use it somewhere else you will have to test it and adjust it if necessary.<\/p>\nDifferent uses of regular expressions<\/h2>\n
RegExp.prototype.test()<\/h2>\n
test()<\/code> method executes a search for a match between a regular expression and a specified string. Returns true<\/code> or false<\/code>.<\/p>\nfoo:<\/code><\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.03.34-PM.png\")
<\/figure>\nRegExp.prototype.exec()<\/h2>\n
exec()<\/code> method executes a search for a match in a specified string. Returns a result array, or null.<\/p>\nfoo<\/code> in the given string:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.04.02-PM.png\")
<\/figure>\nString.prototype.match()<\/h2>\n
match()<\/code> method retrieves the result of matching a string against a regular expression.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.04.19-PM.png\")
<\/figure>\nString.prototype.matchAll()<\/h2>\n
matchAll()<\/code> method returns an iterator of all results matching a string against a regular expression, including capturing groups.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.04.38-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.05.09-PM.png\")
<\/figure>\nString.prototype.search()<\/h2>\n
search()<\/code> method executes a search for a match between a regular expression and this string object. It returns the index at which the matched happened, or -1 is there is no match.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.05.25-PM.png\")
<\/figure>\nString.prototype.replace()<\/h2>\n
replace()<\/code> method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If the pattern is a string, only the first occurrence will be replaced.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.05.44-PM.png\")
<\/figure>\nString.prototype.replaceAll()<\/h2>\n
replaceAll()<\/code> method returns a new string with all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.06.02-PM.png\")
<\/figure>\nString.prototype.split()<\/h2>\n
split()<\/code> method divides a String into an ordered set of substrings and puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method’s call.<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.06.20-PM.png\")
<\/figure>\nBuilding regular expressions<\/h2>\n
Anchoring<\/h2>\n
\/hello\/\r\n<\/code><\/pre>\nhello<\/code> wherever it was put inside the string. If you want to match strings that start with ‘hello,’ use the ^<\/code> operator:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.06.38-PM.png\")
<\/figure>\nhello<\/code>, use the $<\/code> operator:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.06.56-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.07.13-PM.png\")
<\/figure>\n.*<\/code>, which matches any character repeated zero or more times:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.07.27-PM.png\")
<\/figure>\nMatch items by character or numeric range<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.07.44-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.08.02-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.08.19-PM.png\")
<\/figure>\nNegating a pattern<\/h2>\n
^<\/code> character at the beginning of a pattern anchors it to the beginning of a string. However when used inside a range, it negates it:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.44.43-PM.png\")
<\/figure>\nMeta-characters<\/h2>\n
\n
d<\/code> matches any digit, equivalent to [0-9]<\/li>\nD<\/code> matches any character that’s not a digit, equivalent to [^0-9]<\/li>\nw<\/code> matches any alphanumeric character (plus underscore), equivalent to [A-Za-z_0-9]<\/li>\nW<\/code> matches any non-alphanumeric character, anything except [^A-Za-z_0-9]<\/li>\ns<\/code> matches any whitespace character: spaces, tabs, newlines and Unicode spaces<\/li>\nS<\/code> matches any character that’s not a whitespace<\/li>\nn<\/code> matches a newline character<\/li>\nt<\/code> matches a tab character<\/li>\nuXXXX<\/code> matches a unicode character with code XXXX (requires the u flag)<\/li>\n[^]<\/code> matches any character, including newline characters. It’s useful on multiline strings<\/li>\nb<\/code> matches a set of characters at the beginning or end of a word<\/li>\nB<\/code> matches a set of characters not at the beginning or end of a word<\/li>\n<\/ul>\nRegular expression choices (or)<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.09.26-PM.png\")
<\/figure>\nQuantifiers<\/h2>\n
?<\/code>: optional quantifier<\/strong> Imagine you need to find if a string contains one digit in it, just the one, you can do something like:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.09.46-PM.png\")
<\/figure>\n+<\/code>: 1 ore more<\/strong> Matches one or more (>=1) items:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.10.30-PM.png\")
<\/figure>\n*<\/code>: 0 ore more<\/strong> Matches cero or more (>=0) items:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.10.44-PM.png\")
<\/figure>\n{n}<\/code>: fixed number of matches<\/strong> Matches exactly ‘n’ items:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.10.59-PM.png\")
<\/figure>\n{n, m}<\/code>: n to m number of matches<\/strong> Matches between ‘n’ and ‘m’ times:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.46.18-PM.png\")
<\/figure>\nm<\/code> can also be omitted, in that case, it will match at least ‘n’ items:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.46.42-PM.png\")
<\/figure>\nEscaping<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.13.09-PM.png\")
<\/figure>\nGroups<\/h2>\n
(...)<\/code>:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.13.12-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.13.16-PM.png\")
<\/figure>\nmatch()<\/code> and exec()<\/code> as we saw before, they can be captured separately:<\/p>\nexec()<\/code>:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.13.57-PM.png\")
<\/figure>\n <\/code><\/p>\nmatch()<\/code>:<\/p>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.15.47-PM.png\")
<\/figure>\nNamed capture groups<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.16.04-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.16.19-PM.png\")
<\/figure>\nFlags<\/h2>\n
\n
g<\/code>: matches the pattern multiple times<\/li>\ni<\/code>: makes the regex case insensitive<\/li>\nm<\/code>: enables multiline mode. In this mode, ^ and $ match the start and end of the whole string. Without this, with multiline strings they match the beginning and end of each line.<\/li>\nu<\/code>: enables support for unicode (introduced in ES6\/ES2015)<\/li>\ns<\/code>: short for single line, it causes the . to match new line characters as well<\/li>\n<\/ul>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.16.39-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.16.53-PM.png\")
<\/figure>\nPassword strength<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.16.56-PM.png\")
<\/figure>\nValidating email address<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.17.20-PM.png\")
<\/figure>\nIP Addresses<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.17.23-PM.png\")
<\/figure>\n![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.17.29-PM.png\")
<\/figure>\nPull domain from URL<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.18.13-PM.png\")
<\/figure>\nPull image source<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.18.32-PM.png\")
<\/figure>\nCredit card numbers<\/h2>\n
![\"\"](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/07\/Screen-Shot-2020-07-08-at-3.18.52-PM.png\")
<\/figure>\nSee Campaign: <\/strong>https:\/\/thenextweb.com\/syndication\/2020\/07\/11\/javascript-regular-expressions-arent-that-daunting-heres-how-to-design-your-own\/<\/a>
Contact Information:<\/b>
LIVE CODE STREAM<\/p>\n
<\/a>, Wire<\/a>, United States<\/a>, English<\/a><\/p>\n<\/div>\n
\nContact Information:<\/h3>\n
The first time I ever encountered a regular expression was many years ago now, but I still remember my first thoughts on it: What is this string-like thing? I don’t want to touch it, it looks scary. I don’t remember quite what that regex was doing, or how exactly it looked like, but it scared … Continue reading Javascript regular expressions aren’t that daunting — here’s how to design your own<\/span><\/a> Continue Reading