DEV Community

Cover image for Advanced Regex With Modern Javascript Complete Guide
zidniryi
zidniryi

Posted on

Advanced Regex With Modern Javascript Complete Guide

#javascript #es6 #reactnative #webdev

What is Regex?

Usually called with Regular Expression , Regexp, or Regex. Regex is a string of text that allows you to create patterns that help match, locate, and manage text.

Regular expressions are a generalized way to match patterns with sequences of characters. It is used in every programming language like C++, Java, Python, Javascript, etc.

Why do we need to use Regex, ok before Regex is very applicable in Front End and Back End.

Regex is useful for filtering text, this is very useful because by using Regex we can choose what characters can enter our server and with regex, we can also filter out a file extension and many more. Ok for more convenience let's do it in this tutorial.

Ok in the introduction in this tutorial we will implement regex using modern javascript using ES6 +.

Ok Before starting this tutorial you can invite your pet like your cat or dog. To walk on your keyboard. LOL.

1. Regex For Number


const regNumber = /^\d*(\.\d+)?$/
const result = '123'.match(regNumber)       // true
if (result) {
    console.log('Match')
} else {
    console.log('Not Match')
}
Enter fullscreen mode Exit fullscreen mode

2. Regex For Match Lowercase


const regexStringSensitive = /[a-z]/g
const result = 'HELLO'.match(regexStringSensitive)
if (result) {
    console.log('True')
} else {
    console.log('False')
}
Enter fullscreen mode Exit fullscreen mode

3. Regex For Match Email


const regexEmail = /^(([^<>()\[\]\\.,;:\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,}))$/
const result = 'helo@gmail.com'.match(regexEmail)
if (result) {
    console.log('Email is Match')
} else {
    console.log('Not Match')
}
Enter fullscreen mode Exit fullscreen mode

4. Regex For Match Some String


const regexMatchString = /(abc|def)[0-9]{8,11}/
const result = 'abc234832748374asdf7943278934haskhjd'.match(regexMatchString)  //if match abc234832748374 it will true
if (result) {
    console.log('Match')
} else {
    console.log('Not Match')
}
Enter fullscreen mode Exit fullscreen mode

5. Regex For Match Multi-Word


const regexMatchLove = /\LOVE|\bLie/
const result = 'I LOVE YOU AND I NOT LIE'.match(regexMatchLove)  // Match with word LOVE and LIE
if (result) {
    console.log('Match Word')
} else {
    console.log('Not Match')
}
Enter fullscreen mode Exit fullscreen mode

6. Regex For Match File Extensions


const regexFileName = /\.(gif|jpg|jpeg|tiff|png)$/i
const result = 'helo.jpg'.match(regexFileName)  // match with filename gif|jpg|jpeg|tiff|png
if (result) {
    console.log('Match File')
} else {
    console.log('Not Match')
}
Enter fullscreen mode Exit fullscreen mode

7. Regex Min Max


const regexMinMax = /^.{8,20}$/
const result = 'helo.jpg 123'.match(regexMinMax)   //min 8 max 20
if (result) {
    console.log('Recomended Password')
} else {
    console.log('Not Recomended Password')
}
Enter fullscreen mode Exit fullscreen mode

8. Regex For Special Character


const regexSpecialCharacter = /[\!\@\#\$\%\^\&\*\)\(\+\=\.\<\>\{\}\[\]\:\;\'\"\|\~\`\_\-]/g
const result = '*( Helo {k. ='.match(regexSpecialCharacter)
if (result) {
    console.log('Contain Special Character')
} else {
    console.log('Not Contain Special Character')
}
Enter fullscreen mode Exit fullscreen mode

Reference for Regex 

Any character except [\^$.|?*+()    Literal character
\ followed by any of [\^$.|?*+(){}  Backslash escapes a metacharacter
.   Any character
|   Alternation
\|  Alternation
?   Greedy quantifier
\?  Greedy quantifier
??  Lazy quantifier
?+  Possessive quantifier
*   Greedy quantifier
*?  Lazy quantifier
*+  Possessive quantifier
+   Greedy quantifier
\+  Greedy quantifier
+?  Lazy quantifier
++  Possessive quantifier
{ and } Literal curly braces
{n} where n is an integer >= 1  Fixed quantifier
{n,m} where n >= 0 and m >= n   Greedy quantifier
{n,} where n >= 0   Greedy quantifier
{,m} where m >= 1   Greedy quantifier
\{n\} where n is an integer >= 1    Fixed quantifier
\{n,m\} where n >= 0 and m >= n Greedy quantifier
\{n,\} where n >= 0 Greedy quantifier
\{,m\} where m >= 1 Greedy quantifier
{n,m}? where n >= 0 and m >= n  Lazy quantifier
{n,}? where n >= 0  Lazy quantifier
{,m}? where m >= 1  Lazy quantifier
{n,m}+ where n >= 0 and m >= n  Possessive quantifier
{n,}+ where n >= 0  Possessive quantifier
^   String anchor
^   Line anchor
$   String anchor
$   Line anchor
\a  Character escape
\A  String anchor
\A  Attempt anchor
\b  Word boundary
\b  Backspace character
\B  Word non-boundary
\B  Backslash character
\c  XML shorthand
\ca through \cz Control character escape
\cA through \cZ Control character escape
\C  XML shorthand
\d  Digits shorthand
\D  Non-digits shorthand
\e  Escape character
\f  Form feed character
\g{name}    Named backreference
\g-1, \g-2, etc.    Relative Backreference
\g{-1}, \g{-2}, etc.    Relative Backreference
\g1 through \g99    Backreference
\g{1} through \g{99}    Backreference
\g<name> where “name” is the name of a capturing group  Named subroutine call
\g<name> where “name” is the name of a capturing group  Named backreference
\g'name' where “name” is the name of a capturing group  Named subroutine call
\g'name' where “name” is the name of a capturing group  Named backreference
\g<0>   Recursion
\g'0'   Recursion
\g<1> where 1 is the number of a capturing group    Subroutine call
\g<1> where 1 is the number of a capturing group    Backreference
\g'1' where 1 is the number of a capturing group    Subroutine call
\g'1' where 1 is the number of a capturing group    Backreference
\g<-1> where -1 is a negative integer   Relative subroutine call
\g<-1> where -1 is a negative integer   Relative backreference
\g'-1' where -1 is a negative integer   Relative subroutine call
\g'-1' where -1 is a negative integer   Relative backreference
\g<+1> where +1 is a positive integer   Forward subroutine call
\g'+1' where +1 is a positive integer   Forward subroutine call
\G  Attempt anchor
\G  Match anchor
\h  Hexadecimal digit shorthand
\h  Horizontal whitespace shorthand
\H  Non-hexadecimal digit shorthand
\H  Non-horizontal whitespace shorthand
\i  XML shorthand
\I  XML shorthand
\k<name>    Named backreference
\k'name' through \k'99' Named backreference
\k{name}    Named backreference
\k<1> through \k<99>    Backreference
\k'1' through \k'99'    Backreference
\k<-1>, \k<-2>, etc.    Relative Backreference
\k'-1', \k'-2', etc.    Relative Backreference
\K  Keep text out of the regex match
\l  Lowercase shorthand
\L  Non-lowercase shorthand
\m  Tcl start of word boundary
\M  Tcl end of word boundary
\n  Line feed character
\N  Not a line break
Literal CRLF, LF, or CR line break  Line break
\o{7777} where 7777 is any octal number Octal escape
\pL where L is a Unicode category   Unicode category
\PL where L is a Unicode category   Unicode category
\p{L} where L is a Unicode category Unicode category
\p{IsL} where L is a Unicode category   Unicode category
\p{Category}    Unicode category
\p{IsCategory}  Unicode category
\p{Script}  Unicode script
\p{IsScript}    Unicode script
\p{Block}   Unicode block
\p{InBlock} Unicode block
\p{IsBlock} Unicode block
\P{Property}    Negated Unicode property
\p{^Property}   Negated Unicode property
\P{^Property}   Unicode property
\Q…\E Escape sequence
\r  Carriage return character
\R  Line break
\s  Whitespace shorthand
\S  Non-whitespace shorthand
\t  Tab character
\u  Uppercase shorthand
\uFFFF where FFFF are 4 hexadecimal digits  Unicode code point
\u{FFFF} where FFFF are 1 to 4 hexadecimal digits   Unicode code point
\U  Non-uppercase shorthand
\v  Vertical tab character
\v  Vertical whitespace shorthand
\V  Non-vertical whitespace shorthand
\w  Word character shorthand
\W  Non-word character shorthand
\xFF where FF are 2 hexadecimal digits  Hexadecimal escape
\xFFFF where FFFF are 4 hexadecimal digits  Unicode code point
\x{FFFF} where FFFF are 1 to 4 hexadecimal digits   Unicode code point
\X  Unicode grapheme
\y  Tcl word boundary
\Y  Tcl word non-boundary
\Z  String anchor
\z  String anchor
\0  NULL escape
\1 through \7   Octal escape
\1 through \9   Backreference
\10 through \77 Octal escape
\10 through \99 Backreference
\100 through \377   Octal escape
\01 through \0377   Octal escape
\‘    String anchor
\‘    Attempt anchor
\'  String anchor
\<  GNU word boundary
\>  GNU word boundary
[[:<:]] POSIX word boundary
[[:>:]] POSIX word boundary
(regex) Capturing group
\(regex\)   Capturing group
(?:regex)   Non-capturing group
(?<name>regex)  Named capturing group
(?'name'regex)  Named capturing group
(?#comment) Comment
(?|regex)   Branch reset group
(?>regex)   Atomic group
(?=regex)   Positive lookahead
(?!regex)   Negative lookahead
(?<=regex)  Positive lookbehind
(?<!regex)  Negative lookbehind
(?(?=regex)then|else) where (?=regex) is any valid lookaround and then and else are any valid regexes   Lookaround conditional
(?(regex)then|else) where regex, then, and else are any valid regexes and regex is not the name of a capturing group    Implicit lookahead conditional
(?(name)then|else) where name is the name of a capturing group and then and else are any valid regexes  Named conditional
(?(<name>)then|else) where name is the name of a capturing group and then and else are any valid regexes    Named conditional
(?('name')then|else) where name is the name of a capturing group and then and else are any valid regexes    Named conditional
(?(1)then|else) where 1 is the number of a capturing group and then and else are any valid regexes  Conditional
(?(-1)then|else) where -1 is a negative integer and then and else are any valid regexes Relative conditional
(?(+1)then|else) where +1 is a positive integer and then and else are any valid regexes Forward conditional
(?(+1)then|else) where 1 is the number of a capturing group and then and else are any valid regexes Conditional
(?<capture-subtract>regex) where “capture” and “subtract” are group names and “regex” is any regex  Balancing group
(?'capture-subtract'regex) where “capture” and “subtract” are group names and “regex” is any regex  Balancing group
(?&name) where “name” is the name of a capturing group  Named subroutine call
(?(DEFINE)regex) where “regex” is any regex Subroutine definitions
(?P<name>regex) Named capturing group
(?P=name)   Named backreference
(?P=1) through (?P=99)  Backreference
(?P>name) where “name” is the name of a capturing group Named subroutine call
(?R)    Recursion
(?0)    Recursion
(?1) where 1 is the number of a capturing group Subroutine call
(?-1) where -1 is a negative integer    Relative subroutine call
(?+1) where +1 is a positive integer    Forward subroutine call
Enter fullscreen mode Exit fullscreen mode

Now that above is the Regular Expression that is most widely used by programmers to filter characters. Please develop it with your needs. It may be useful.

source: www.regular-expressions.info

Top comments (3)

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • • Edited

Although regex is cool, but please try to avoid it where possible. It’s okay for single task but may affect site performance for complex tasks.

For example, your /^.{8,20}$/ pattern is used to check the length of a string. You can do this instead:

let i = valueToCheck.length;
if (i >= 8 && i <= 20) {
    // Passed!
}

If you have to, then make sure to do a minimum validation check with less effort before doing the regex part. So, at least if your value does not pass the first check, it will then abort the later checks:

if (
    // Make sure it is not empty
    valueToCheck &&
    // Make sure it starts with an `#`
    valueToCheck[0] === '#' &&
    // Validate it!
    valueToCheck.match(/^#([a-f\d]{1,2}){1,2}$/i)
) {
   // A hex color code
}

JavaScript might not the case but PHP and other templating language performance can be decreased by regular expression and so they can be improved this way.

Collapse
 
zidniryi profile image
zidniryi •

Thank you Bro, yes you can use length, but this is a regex tutorial. Thank you for the advice and discussion.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

hitesh_developer profile image

Angular vs Next.js: A Detailed Comparison

Hitesh Chauhan -

rwxpat profile image

Must-Know Ruby on Rails Gems for Improved Productivity

Patrick Gramatowski -

vivekyadav200988 profile image

Building Interactive Chat Applications with Microsoft DirectLine API: A Complete Guide with Code Examples

Vivek Yadav -

hitesh_developer profile image

Angular vs Next.js vs Nuxt.js: Choosing the Right Framework for Your Project

Hitesh Chauhan -