Table Of Contents<\/h3>\n\n- 1. Document Setup & Introduction<\/a><\/dt>\n
- \n
\n- 1.1 Document Setup<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 1.2 Syntax & Application<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 1.3 Creating a regular expression<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 2. Types of Regular Expressions<\/a><\/dt>\n
- \n
\n- 2.1 Modifiers<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 2.2 Brackets<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 2.3 Metacharacters<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 2.4 Quantifiers<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 3. RegExp Object<\/a><\/dt>\n
- \n
\n- 2.1 RegExp Object Properties<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
\n- 2.2 RegExp Object Methods<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
\n- 4. Conclusion<\/a><\/dt>\n<\/dl>\n
\n- 5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Document Setup & Introduction<\/h2>\nThe following section helps you prepare the file where we’re going to code and introduce you to the very basic syntax and application of regular expressions. We’ll have a more detailed look at each of the ways we can use these expressions later in this article.<\/p>\n
<\/a>1.1 Document Setup<\/h3>\nFirst, create a new HTML document with the basic syntax inside, including an empty (for now) script<\/code> section:<\/p>\njs-regexp.html<\/em><\/span><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Javascript Regular Expressions Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<!-- JAVASCRIPT SECTION -->\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nIn the HTML section, let’s also add few lines we’ll need for more interactive results:<\/p>\n
<!-- HTML SECTION -->\r\n<p>Click the button to perform something with regular expressions.<\/p>\r\n<button onclick=\"resultFunction()\">See Result<\/button>\r\n<p id=\"result\"><\/p>\r\n<\/pre>\n<\/a>1.2 Syntax & Application<\/h3>\nThe syntax of a regular expression is as follows: \/pattern\/modifiers;<\/em><\/p>\nFor example: var patt = \/webcodegeeks\/i<\/code> where:<\/p>\n\n\/webcodegeeks\/i<\/code> is a regular expression.<\/li>\nwebcodegeeks<\/code> is a pattern (to be used in a search).<\/li>\ni<\/code> is a modifier (modifies the search to be case-insensitive).<\/li>\n<\/ul>\n<\/a>1.3 Creating a regular expression<\/h3>\nYou construct a regular expression in one of two ways:<\/p>\n
Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows:<\/p>\n
var re = \/ab+c\/;<\/pre>\nRegular expression literals provide compilation of the regular expression when the script is loaded. When the regular expression will remain constant, use this for better performance.<\/p>\n
Or calling the constructor function of the RegExp object, as follows:<\/p>\n
var re = new RegExp(\"ab+c\");<\/pre>\nUsing the constructor function provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don’t know the pattern and are getting it from another source, such as user input.<\/p>\n
<\/a>2. Types of Regular Expressions<\/h2>\nRegular expressions can be divided in six groups of similar expressions.<\/p>\n
<\/a>2.1 Modifiers<\/h3>\nModifiers are used to perform case-insensitive and global searches:<\/p>\n
i<\/code> – Does a case-insensitive search for “webcodegeeks” in a string:<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Refer to WebCodeGeeks\"; \r\n var patt1 = \/webcodegeeks\/i; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"i](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions1-1.jpg\")
<\/a>i – Perform case-insensitive matching<\/figcaption><\/figure>\ng<\/code> – Performs a global match (find all matches rather than stopping after the first match:<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"This is not what it is!\";\r\n var patt1 = \/is\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"g](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions2.jpg\")
<\/a>g – Perform a global match<\/figcaption><\/figure>\nm<\/code> – Performs multi line matching. In this case we’re trying to get all “is” in the beginning of the line.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"\\nWhat is this? \\nIs it a cookie?\";\r\n var patt1 = \/is\/m; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"m](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions3.jpg\")
<\/a>m – Perform multiline matching<\/figcaption><\/figure>\n<\/a>2.2 Brackets<\/h3>\nBrackets are used to find a range of characters:<\/p>\n
[abc]<\/code> – Finds any character between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Why are you still here?\";\r\n var patt1 = \/[y]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
![\"[abc]](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions4-1.jpg\")
<\/a>[abc] – Find any character between the brackets<\/figcaption><\/figure>[^abc]<\/code> – Finds any character NOT between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Why are you still here?\";\r\n var patt1 = \/[^y]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
![\"[^abc]](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions5.jpg\")
<\/a>[^abc] – Find any character NOT between the brackets<\/figcaption><\/figure>[0-9]<\/code> – Finds any digit between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"123456789\";\r\n var patt1 = \/[2-5]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
![\"[0-9]](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions6.jpg\")
<\/a>[0-9] – Find any digit between the brackets<\/figcaption><\/figure>(x|y)<\/code> – Finds any of the alternatives specified.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"web code geeks we code world wide\";\r\n var patt1 = \/(code|web)\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"(x|y)](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions8.jpg\")
<\/a>(x|y) – Find any of the alternatives specified<\/figcaption><\/figure>\n<\/a>2.3 Metacharacters<\/h3>\nMetacharacters are characters with a special meaning:<\/p>\n
.<\/code> – Finds a single character, except newline or line terminator.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"That's my hot hat!\";\r\n var patt1 = \/(h.t)\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\".](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions9.jpg\")
<\/a>. – Find a single character, except newline or line terminator<\/figcaption><\/figure>\n\\w<\/code> – Finds a word character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Interest raised to 4.5%\";\r\n var patt1 = \/\\w\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\w](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions10.jpg\")
<\/a>\\w – Find a word character<\/figcaption><\/figure>\n\\W<\/code> – Finds a NON word character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Interest raised to 4.5%\";\r\n var patt1 = \/\\W\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\W](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions11.jpg\")
<\/a>\\W – Find a non-word character<\/figcaption><\/figure>\nAs you can see, all spaces, the comma and the percentage character are shown, because they are considered non-word.<\/p>\n
\\d<\/code> – Finds a digit.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"I'm 114 years old!\";\r\n var patt1 = \/\\d\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\d](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions12.jpg\")
<\/a>\\d – Find a non-word character<\/figcaption><\/figure>\n\\D<\/code> – Finds a non-digit character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"I'm 114 years old!\";\r\n var patt1 = \/\\D\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\D](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions13-1.jpg\")
<\/a>\\D – Find a non-digit character<\/figcaption><\/figure>\n\\s<\/code> – Finds a whitespace character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"There is not much to show here\";\r\n var patt1 = \/\\s\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\s](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions14.jpg\")
<\/a>\\s – Find a whitespace character<\/figcaption><\/figure>\n\\S<\/code> – Finds a non-whitespace character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"There is not much to show here\";\r\n var patt1 = \/\\S\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\S](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions15.jpg\")
<\/a>\\S – Find a non-whitespace character<\/figcaption><\/figure>\n\\b<\/code> – Finds a match at the beginning\/end of a word.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG - WebCodeGeeks\";\r\n var patt1 = \/\\bWCG\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\b](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions16.jpg\")
<\/a>\\b – Find a match at the beginning\/end of a word<\/figcaption><\/figure>\n\\B<\/code> – Finds a match not at the beginning\/end of a word.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG - WebCodeGeeks\";\r\n var patt1 = \/\\BCode\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\B](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions17.jpg\")
<\/a>\\B – Find a match not at the beginning\/end of a word<\/figcaption><\/figure>\n\\0<\/code> – Finds a NUL character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG.\\0Learn JAVA\";\r\n var patt1 = \/\\0\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\0](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions18.jpg\")
<\/a>\\0 – Find a NUL character<\/figcaption><\/figure>\n\\n<\/code> – Finds a new line character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. \\nLearn JAVA\";\r\n var patt1 = \/\\n\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\n](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions19.jpg\")
<\/a>\\n – Find a new line character<\/figcaption><\/figure>\n\\f<\/code> – Finds a form feed character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn\\f HTML\";\r\n var patt1 = \/\\f\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\f](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions20.jpg\")
<\/a>\\f – Find a form feed character<\/figcaption><\/figure>\n\\r<\/code> – Finds a carriage return character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit\\r WCG. Learn jQuery.\";\r\n var patt1 = \/\\r\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\r](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions21.jpg\")
<\/a>\\r – Find a carriage return character<\/figcaption><\/figure>\n\\t<\/code> – Finds a tab character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn CSS3 \\tfor free.\";\r\n var patt1 = \/\\t\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\t](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions22.jpg\")
<\/a>\\t – Find a tab character<\/figcaption><\/figure>\n\\v<\/code> – Finds a vertical tab character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn \\vAngularJS.\";\r\n var patt1 = \/\\v\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\v](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions23.jpg\")
<\/a>\\v – Find a vertical tab character<\/figcaption><\/figure>\n\\xxx<\/code> – Finds the character specified by an octal number xxx.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. Learn programming.\";\r\n var patt1 = \/\\127\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\xxx](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions24.jpg\")
<\/a>\\xxx – Find the character specified by an octal number xxx<\/figcaption><\/figure>\n\\xdd<\/code> – Finds the character specified by a hexadecimal number dd.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. Learn programming.\";\r\n var patt1 = \/\\x57\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n![\"\\xdd](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-regular-expressions25.jpg\")
<\/a>\\xdd – Find the character specified by a hexadecimal number dd<\/figcaption><\/figure>\n
- \n
- 1.1 Document Setup<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 1.2 Syntax & Application<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 1.3 Creating a regular expression<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 2. Types of Regular Expressions<\/a><\/dt>\n
- \n
- \n
- 2.1 Modifiers<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 2.2 Brackets<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 2.3 Metacharacters<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 2.4 Quantifiers<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 3. RegExp Object<\/a><\/dt>\n
- \n
- \n
- 2.1 RegExp Object Properties<\/a><\/dt>\n<\/dl>\n<\/dd>\n
- \n
- \n
- 2.2 RegExp Object Methods<\/a><\/dt>\n<\/dl>\n<\/dd>\n<\/dl>\n
- \n
- 4. Conclusion<\/a><\/dt>\n<\/dl>\n
- \n
- 5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n
<\/a>1. Document Setup & Introduction<\/h2>\n
The following section helps you prepare the file where we’re going to code and introduce you to the very basic syntax and application of regular expressions. We’ll have a more detailed look at each of the ways we can use these expressions later in this article.<\/p>\n
<\/a>1.1 Document Setup<\/h3>\n
First, create a new HTML document with the basic syntax inside, including an empty (for now)
script<\/code> section:<\/p>\njs-regexp.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Javascript Regular Expressions Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<!-- JAVASCRIPT SECTION -->\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
In the HTML section, let’s also add few lines we’ll need for more interactive results:<\/p>\n
<!-- HTML SECTION -->\r\n<p>Click the button to perform something with regular expressions.<\/p>\r\n<button onclick=\"resultFunction()\">See Result<\/button>\r\n<p id=\"result\"><\/p>\r\n<\/pre>\n
<\/a>1.2 Syntax & Application<\/h3>\n
The syntax of a regular expression is as follows: \/pattern\/modifiers;<\/em><\/p>\n
For example:
var patt = \/webcodegeeks\/i<\/code> where:<\/p>\n- \n
\/webcodegeeks\/i<\/code> is a regular expression.<\/li>\nwebcodegeeks<\/code> is a pattern (to be used in a search).<\/li>\ni<\/code> is a modifier (modifies the search to be case-insensitive).<\/li>\n<\/ul>\n<\/a>1.3 Creating a regular expression<\/h3>\n
You construct a regular expression in one of two ways:<\/p>\n
Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows:<\/p>\n
var re = \/ab+c\/;<\/pre>\n
Regular expression literals provide compilation of the regular expression when the script is loaded. When the regular expression will remain constant, use this for better performance.<\/p>\n
Or calling the constructor function of the RegExp object, as follows:<\/p>\n
var re = new RegExp(\"ab+c\");<\/pre>\n
Using the constructor function provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don’t know the pattern and are getting it from another source, such as user input.<\/p>\n
<\/a>2. Types of Regular Expressions<\/h2>\n
Regular expressions can be divided in six groups of similar expressions.<\/p>\n
<\/a>2.1 Modifiers<\/h3>\n
Modifiers are used to perform case-insensitive and global searches:<\/p>\n
i<\/code> – Does a case-insensitive search for “webcodegeeks” in a string:<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Refer to WebCodeGeeks\"; \r\n var patt1 = \/webcodegeeks\/i; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>i – Perform case-insensitive matching<\/figcaption><\/figure>\n g<\/code> – Performs a global match (find all matches rather than stopping after the first match:<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"This is not what it is!\";\r\n var patt1 = \/is\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>g – Perform a global match<\/figcaption><\/figure>\n m<\/code> – Performs multi line matching. In this case we’re trying to get all “is” in the beginning of the line.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"\\nWhat is this? \\nIs it a cookie?\";\r\n var patt1 = \/is\/m; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>m – Perform multiline matching<\/figcaption><\/figure>\n <\/a>2.2 Brackets<\/h3>\n
Brackets are used to find a range of characters:<\/p>\n
[abc]<\/code> – Finds any character between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Why are you still here?\";\r\n var patt1 = \/[y]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>[abc] – Find any character between the brackets<\/figcaption><\/figure> [^abc]<\/code> – Finds any character NOT between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Why are you still here?\";\r\n var patt1 = \/[^y]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>[^abc] – Find any character NOT between the brackets<\/figcaption><\/figure> [0-9]<\/code> – Finds any digit between the brackets.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"123456789\";\r\n var patt1 = \/[2-5]\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>[0-9] – Find any digit between the brackets<\/figcaption><\/figure> (x|y)<\/code> – Finds any of the alternatives specified.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"web code geeks we code world wide\";\r\n var patt1 = \/(code|web)\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>(x|y) – Find any of the alternatives specified<\/figcaption><\/figure>\n <\/a>2.3 Metacharacters<\/h3>\n
Metacharacters are characters with a special meaning:<\/p>\n
.<\/code> – Finds a single character, except newline or line terminator.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"That's my hot hat!\";\r\n var patt1 = \/(h.t)\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>. – Find a single character, except newline or line terminator<\/figcaption><\/figure>\n \\w<\/code> – Finds a word character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Interest raised to 4.5%\";\r\n var patt1 = \/\\w\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\w – Find a word character<\/figcaption><\/figure>\n \\W<\/code> – Finds a NON word character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Interest raised to 4.5%\";\r\n var patt1 = \/\\W\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\W – Find a non-word character<\/figcaption><\/figure>\n As you can see, all spaces, the comma and the percentage character are shown, because they are considered non-word.<\/p>\n
\\d<\/code> – Finds a digit.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"I'm 114 years old!\";\r\n var patt1 = \/\\d\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\d – Find a non-word character<\/figcaption><\/figure>\n \\D<\/code> – Finds a non-digit character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"I'm 114 years old!\";\r\n var patt1 = \/\\D\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\D – Find a non-digit character<\/figcaption><\/figure>\n \\s<\/code> – Finds a whitespace character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"There is not much to show here\";\r\n var patt1 = \/\\s\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\s – Find a whitespace character<\/figcaption><\/figure>\n \\S<\/code> – Finds a non-whitespace character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"There is not much to show here\";\r\n var patt1 = \/\\S\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\S – Find a non-whitespace character<\/figcaption><\/figure>\n \\b<\/code> – Finds a match at the beginning\/end of a word.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG - WebCodeGeeks\";\r\n var patt1 = \/\\bWCG\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\b – Find a match at the beginning\/end of a word<\/figcaption><\/figure>\n \\B<\/code> – Finds a match not at the beginning\/end of a word.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG - WebCodeGeeks\";\r\n var patt1 = \/\\BCode\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\B – Find a match not at the beginning\/end of a word<\/figcaption><\/figure>\n \\0<\/code> – Finds a NUL character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG.\\0Learn JAVA\";\r\n var patt1 = \/\\0\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\0 – Find a NUL character<\/figcaption><\/figure>\n \\n<\/code> – Finds a new line character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. \\nLearn JAVA\";\r\n var patt1 = \/\\n\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\n – Find a new line character<\/figcaption><\/figure>\n \\f<\/code> – Finds a form feed character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn\\f HTML\";\r\n var patt1 = \/\\f\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\f – Find a form feed character<\/figcaption><\/figure>\n \\r<\/code> – Finds a carriage return character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit\\r WCG. Learn jQuery.\";\r\n var patt1 = \/\\r\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\r – Find a carriage return character<\/figcaption><\/figure>\n \\t<\/code> – Finds a tab character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn CSS3 \\tfor free.\";\r\n var patt1 = \/\\t\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\t – Find a tab character<\/figcaption><\/figure>\n \\v<\/code> – Finds a vertical tab character.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WCG. Learn \\vAngularJS.\";\r\n var patt1 = \/\\v\/; \/\/ pattern\/modifier\r\n var result = str.search(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\v – Find a vertical tab character<\/figcaption><\/figure>\n \\xxx<\/code> – Finds the character specified by an octal number xxx.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. Learn programming.\";\r\n var patt1 = \/\\127\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\xxx – Find the character specified by an octal number xxx<\/figcaption><\/figure>\n \\xdd<\/code> – Finds the character specified by a hexadecimal number dd.<\/p>\n<script type=\"text\/javascript\">\r\nfunction resultFunction() {\r\n var str = \"Visit WebCodeGeeks. Learn programming.\";\r\n var patt1 = \/\\x57\/g; \/\/ pattern\/modifier\r\n var result = str.match(patt1); \/\/ result from matching\r\n document.getElementById(\"result\").innerHTML = result; \/\/ set result to the paragraph\r\n}\r\n<\/script>\r\n<\/pre>\nThe result after clicking the button which will trigger the paragraph text to be added, would be (in blue):<\/p>\n
<\/a>\\xdd – Find the character specified by a hexadecimal number dd<\/figcaption><\/figure>\n
- 5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n
- 4. Conclusion<\/a><\/dt>\n<\/dl>\n
- \n
- \n
- 3. RegExp Object<\/a><\/dt>\n
- \n
- \n
- \n
- \n
- 2. Types of Regular Expressions<\/a><\/dt>\n
- \n
- \n