Regular Expressions: JavaScript And Beyond
1 like1,947 views
The document provides an extensive overview of regular expressions in JavaScript, covering syntax, tokens, metacharacters, character classes, quantifiers, and groups. It outlines key concepts such as lookaheads, backreferences, and flags, as well as practical usage and potential pitfalls in regex implementation. Additionally, it offers resources for further reading and emphasizes the distinctions between JavaScript's regex capabilities and those in other programming languages.
![Any character
/./.test('foo');
// true
/./.test('rn')
// false
What do you need instead:
/[sS]/ for JavaScript
or
/./s (works in Perl/PCRE, not in JS)
11](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-11-320.jpg)
![Custom character classes
Example:
/[abc123]/
23](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-23-320.jpg)
![Custom character classes
Example:
/[abc123]/
Metacharacters and ranges supported:
/[A-Fd]/
24](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-24-320.jpg)
![Custom character classes
Example:
/[abc123]/
Metacharacters and ranges supported:
/[A-Fd]/
More than one range is okay:
/[a-cG-M0-7]/
25](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-25-320.jpg)
![Custom character classes
Example:
/[abc123]/
Metacharacters and ranges supported:
/[A-Fd]/
More than one range is okay:
/[a-cG-M0-7]/
IMPORTANT: ranges come from Unicode, not
from national alphabets!
26](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-26-320.jpg)
![Custom character classes
"dot" means just dot!
/[.]/.test('anything') // false
27](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-27-320.jpg)
![Custom character classes
"dot" means just dot!
/[.]/.test('anything') // false
adding ] /[]-]/
28](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-28-320.jpg)
![Inverted character classes
anything except a, b, c:
/[^abc]/
^ as a character:
/[abc^]/
29](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-29-320.jpg)
![Inverted character classes
/[^]/
matches ANY character;
a nice alternative to /[sS]/
30](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-30-320.jpg)
![Inverted character classes
/[^]/
matches ANY character;
could be
a nice alternative to /[sS]/
31](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-31-320.jpg)
![Inverted character classes
/[^]/
matches ANY character;
could be
a nice alternative to /[sS]/
Chrome, FF:
>>> /([^])/.exec('a');
['a', 'a']
32](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-32-320.jpg)
![Inverted character classes
/[^]/
matches ANY character;
could be
a nice alternative to /[sS]/
IE:
>>> /([^])/.exec('a');
['a', '']
33](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-33-320.jpg)
![Inverted character classes
/[^]/
matches ANY character;
could be
a nice alternative to /[sS]/
IE:
>>> /([sS])/.exec('a');
['a', 'a']
34](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-34-320.jpg)
![Greedy quantifiers
var r = /a+/.exec('aaaaa');
>>> r[0]
45](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-45-320.jpg)
![Greedy quantifiers
var r = /a+/.exec('aaaaa');
>>> r[0]
"aaaaa"
46](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-46-320.jpg)
![Lazy quantifiers
var r = /a+?/.exec('aaaaa');
>>> r[0]
48](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-48-320.jpg)
![Lazy quantifiers
var r = /a+?/.exec('aaaaa');
>>> r[0]
"a"
49](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-49-320.jpg)
![Lazy quantifiers
var r = /a+?/.exec('aaaaa');
>>> r[0]
"a"
r = /a*?/.exec('aaaaa');
50](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-50-320.jpg)
![Lazy quantifiers
var r = /a+?/.exec('aaaaa');
>>> r[0]
"a"
r = /a*?/.exec('aaaaa');
>>> r[0]
51](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-51-320.jpg)
![Lazy quantifiers
var r = /a+?/.exec('aaaaa');
>>> r[0]
"a"
r = /a*?/.exec('aaaaa');
>>> r[0]
""
52](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-52-320.jpg)
![Lookahead
var r = /best(?= match)/.exec('best match');
>>> !!r
true
>>> r[0]
"best"
69](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-69-320.jpg)
![Lookahead
var r = /best(?= match)/.exec('best match');
>>> !!r
true
>>> r[0]
"best"
>>> /best(?! match)/.test('best match')
false
70](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-70-320.jpg)
![Methods
RegExp instances:
/regexp/.exec('string')
null or array ['whole match', $1, $2, ...]
/regexp/.test('string')
false or true
String instances:
'str'.match(/regexp/)
'str'.match('w{1,3}')
- same as /regexp/.exec if no 'g' flag used;
- array of all matches if 'g' flag used (internal
capturing groups ignored)
'str'.search(/regexp/)
'str'.search('w{1,3}')
first match index, or -1
88](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-88-320.jpg)
![RegExp injection
// BAD CODE
var re = new RegExp('^' + userInput + '$');
// ...
var userInput = '[abc]'; // oops!
// GOOD, DO IT AT HOME
RegExp.escape = function(text) {
return text.replace(/[-[]{}()*+?.,^$|#s]/g, "$&");
};
var re = new RegExp('^' + RegExp.escape(userInput) + '$');
90](https://image.slidesharecdn.com/regexp-dm-131205173718-phpapp02/85/Regular-Expressions-JavaScript-And-Beyond-90-320.jpg)
Regular Expressions: JavaScript And Beyond
- 2. Regular Expressions: JavaScript And Beyond Max Shirshin Frontend Team Lead deltamethod
- 3. Introduction
- 4. Types of regular expressions • POSIX (BRE, ERE) • PCRE = Perl-Compatible Regular Expressions From the JavaScript language specification: "The form and functionality of regular expressions is modelled after the regular expression facility in the Perl 5 programming language". 4
- 5. JS syntax (overview only) var re = /^foo/; 5
- 6. JS syntax (overview only) var re = /^foo/; // boolean re.test('string'); 6
- 7. JS syntax (overview only) var re = /^foo/; // boolean re.test('string'); // null or Array re.exec('string'); 7
- 8. Regular expressions consist of... ● Tokens — common characters — special characters (metacharacters) ● Operations — quantification — enumeration — grouping 8
- 11. Any character /./.test('foo'); // true /./.test('rn') // false What do you need instead: /[sS]/ for JavaScript or /./s (works in Perl/PCRE, not in JS) 11
- 13. String boundaries >>> /^something$/.test('something') true >>> /^something$/.test('somethingnbad') false 13
- 14. String boundaries >>> /^something$/.test('something') true >>> /^something$/.test('somethingnbad') false >>> /^something$/m.test('somethingnbad') true 14
- 16. Word boundaries >>> /ba/.test('alabama) true >>> /ab/.test('alabama') true 16
- 17. Word boundaries >>> /ba/.test('alabama) true >>> /ab/.test('alabama') true >>> /ab/.test('naïve') true 17
- 18. Word boundaries >>> /ba/.test('alabama) true >>> /ab/.test('alabama') true >>> /ab/.test('naïve') true not a word boundary /Ba/.test('alabama'); 18
- 20. Whitespace /s/ (inverted version: /S/) 20
- 21. Whitespace /s/ (inverted version: /S/) FF: t u00a0 u2003 u2009 n v u1680 u180e u2004 u2005 u200a u2028 Chrome, IE 9: as in FF plus ufeff f r u2000 u2001 u2006 u2007 u2029 u202f IE 7, 8 :-( only: t n v f r u0020 21 u0020 u2002 u2008 u205f u3000
- 22. Alphanumeric characters /d/ ~ digits from 0 to 9 /w/ ~ Latin letters, digits, underscore Does not work for Cyrillic, Greek etc. Inverted forms: /D/ ~ anything but digits /W/ ~ anything but alphanumeric characters 22
- 24. Custom character classes Example: /[abc123]/ Metacharacters and ranges supported: /[A-Fd]/ 24
- 25. Custom character classes Example: /[abc123]/ Metacharacters and ranges supported: /[A-Fd]/ More than one range is okay: /[a-cG-M0-7]/ 25
- 26. Custom character classes Example: /[abc123]/ Metacharacters and ranges supported: /[A-Fd]/ More than one range is okay: /[a-cG-M0-7]/ IMPORTANT: ranges come from Unicode, not from national alphabets! 26
- 27. Custom character classes "dot" means just dot! /[.]/.test('anything') // false 27
- 28. Custom character classes "dot" means just dot! /[.]/.test('anything') // false adding ] /[]-]/ 28
- 29. Inverted character classes anything except a, b, c: /[^abc]/ ^ as a character: /[abc^]/ 29
- 30. Inverted character classes /[^]/ matches ANY character; a nice alternative to /[sS]/ 30
- 31. Inverted character classes /[^]/ matches ANY character; could be a nice alternative to /[sS]/ 31
- 32. Inverted character classes /[^]/ matches ANY character; could be a nice alternative to /[sS]/ Chrome, FF: >>> /([^])/.exec('a'); ['a', 'a'] 32
- 33. Inverted character classes /[^]/ matches ANY character; could be a nice alternative to /[sS]/ IE: >>> /([^])/.exec('a'); ['a', ''] 33
- 34. Inverted character classes /[^]/ matches ANY character; could be a nice alternative to /[sS]/ IE: >>> /([sS])/.exec('a'); ['a', 'a'] 34
- 35. Quantifiers
- 36. Zero or more, one or more /bo*/.test('b') // true 36
- 37. Zero or more, one or more /bo*/.test('b') // true /.*/.test('') 37 // true
- 38. Zero or more, one or more /bo*/.test('b') // true /.*/.test('') // true /bo+/.test('b') // false 38
- 41. How many? /bo{7}/ exactly 7 /bo{2,5}/ from 2 to 5, x < y 41
- 42. How many? /bo{7}/ exactly 7 /bo{2,5}/ from 2 to 5, x < y /bo{5,}/ 5 or more 42
- 43. How many? /bo{7}/ exactly 7 /bo{2,5}/ from 2 to 5, x < y /bo{5,}/ 5 or more This does not work in JS: /b{,5}/.test('bbbbb') 43
- 44. Greedy quantifiers var r = /a+/.exec('aaaaa'); 44
- 45. Greedy quantifiers var r = /a+/.exec('aaaaa'); >>> r[0] 45
- 46. Greedy quantifiers var r = /a+/.exec('aaaaa'); >>> r[0] "aaaaa" 46
- 47. Lazy quantifiers var r = /a+?/.exec('aaaaa'); 47
- 48. Lazy quantifiers var r = /a+?/.exec('aaaaa'); >>> r[0] 48
- 49. Lazy quantifiers var r = /a+?/.exec('aaaaa'); >>> r[0] "a" 49
- 50. Lazy quantifiers var r = /a+?/.exec('aaaaa'); >>> r[0] "a" r = /a*?/.exec('aaaaa'); 50
- 51. Lazy quantifiers var r = /a+?/.exec('aaaaa'); >>> r[0] "a" r = /a*?/.exec('aaaaa'); >>> r[0] 51
- 52. Lazy quantifiers var r = /a+?/.exec('aaaaa'); >>> r[0] "a" r = /a*?/.exec('aaaaa'); >>> r[0] "" 52
- 53. Groups
- 56. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); 56
- 57. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); >>> RegExp.$1 "bo" 57
- 58. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); >>> RegExp.$1 "bo" >>> RegExp.$2 "b" 58
- 59. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); >>> RegExp.$1 "bo" >>> RegExp.$2 "b" >>> RegExp.$9 "" 59
- 60. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); >>> RegExp.$1 "bo" >>> RegExp.$2 "b" >>> RegExp.$9 "" >>> RegExp.$10 undefined 60
- 61. Grouping and the RegExp constructor var result = /(bo)o+(b)/.exec('the booooob'); >>> RegExp.$1 "bo" >>> RegExp.$2 "b" >>> RegExp.$9 "" >>> RegExp.$10 undefined >>> RegExp.$0 undefined 61
- 62. Numbering of capturing groups /((foo) (b(a)r))/ 62
- 63. Numbering of capturing groups /((foo) (b(a)r))/ $1 ( 63 ) foo bar
- 64. Numbering of capturing groups /((foo) (b(a)r))/ $1 ( $2 ( 64 ) ) foo bar foo
- 65. Numbering of capturing groups /((foo) (b(a)r))/ $1 ( $2 ( $3 65 ) ) ( ) foo bar foo bar
- 66. Numbering of capturing groups /((foo) (b(a)r))/ $1 ( $2 ( $3 $4 66 ) ) ( ) ( ) foo bar foo bar a
- 67. Lookahead var r = /best(?= match)/.exec('best match'); 67
- 68. Lookahead var r = /best(?= match)/.exec('best match'); >>> !!r true 68
- 69. Lookahead var r = /best(?= match)/.exec('best match'); >>> !!r true >>> r[0] "best" 69
- 70. Lookahead var r = /best(?= match)/.exec('best match'); >>> !!r true >>> r[0] "best" >>> /best(?! match)/.test('best match') false 70
- 71. Lookbehind NOT supported in JavaScript at all /(?<=text)match/ positive lookbehind /(?<!text)match/ negative lookbehind 71
- 72. Enumerations
- 73. Logical "or" /red|green|blue light/ /(red|green|blue) light/ >>> /var a(;|$)/.test('var a') true 73
- 74. Backreferences true /(red|green) apple is 1/.test('red apple is red') true /(red|green) apple is 1/.test('green apple is green') 74
- 76. Representing a character x09 === t (not Unicode but ASCII/ANSI) u20AC === € (in Unicode) 76
- 77. Representing a character x09 === t (not Unicode but ASCII/ANSI) u20AC === € (in Unicode) backslash takes away special character meaning: /()/.test('()') /n/.test('n') 77 // true // true
- 78. Representing a character x09 === t (not Unicode but ASCII/ANSI) u20AC === € (in Unicode) backslash takes away special character meaning: /()/.test('()') /n/.test('n') // true // true ...or vice versa! /f/.test('f') // false! 78
- 79. Flags
- 80. Regular expression flags g i m s x y 80
- 81. Regular expression flags g i m s x y global match 81
- 82. Regular expression flags g i m s x y global match ignore case 82
- 83. Regular expression flags g i m s x y global match ignore case multiline matching for ^ and $ 83
- 84. Regular expression flags g i m s x y global match ignore case multiline matching for ^ and $ JavaScript does NOT provide support for: string as single line extend pattern 84
- 85. Regular expression flags g i m s x y global match ignore case multiline matching for ^ and $ Mozilla-only, non-standard: sticky Match only from the .lastIndex index (a regexp instance property). Thus, ^ can match at a predefined position. 85
- 86. Alternative syntax for flags /(?i)foo/ /(?i-m)bar$/ /(?i-sm).x$/ /(?i)foo(?-i)bar/ Some implementations do NOT support flag switching on-the-go. In JS, flags are set for the whole regexp instance and you can't change them. 86
- 88. Methods RegExp instances: /regexp/.exec('string') null or array ['whole match', $1, $2, ...] /regexp/.test('string') false or true String instances: 'str'.match(/regexp/) 'str'.match('w{1,3}') - same as /regexp/.exec if no 'g' flag used; - array of all matches if 'g' flag used (internal capturing groups ignored) 'str'.search(/regexp/) 'str'.search('w{1,3}') first match index, or -1 88
- 89. Methods String instances: 'str'.replace(/old/, 'new'); WARNING: special magic supported in the replacement string: $$ inserts a dollar sign "$" $& substring that matches the regexp $` substring before $& $' substring after $& $1, $2, $3 etc.: string that matches n-th capturing group 'str'.replace(/(r)(e)gexp/g, function(matched, $1, $2, offset, sourceString) { // what should replace the matched part on this iteration? return 'replacement'; }); 89
- 90. RegExp injection // BAD CODE var re = new RegExp('^' + userInput + '$'); // ... var userInput = '[abc]'; // oops! // GOOD, DO IT AT HOME RegExp.escape = function(text) { return text.replace(/[-[]{}()*+?.,^$|#s]/g, "$&"); }; var re = new RegExp('^' + RegExp.escape(userInput) + '$'); 90
- 92. Online, just google it: MDN Guide on Regular Expressions The Book: Mastering Regular Expressions O'Reilly Media
- 93. Thank you!