Regular Expressions: JavaScript And Beyond
•
1 gostou•1,929 visualizações
Regular Expressions is a powerful tool for text and data processing. What kind of support do browsers provide for that? What are those little misconceptions that prevent people from using RE effectively? The talk gives an overview of the regular expression syntax and typical usage examples.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Semelhante a Regular Expressions: JavaScript And Beyond
Semelhante a Regular Expressions: JavaScript And Beyond (20)
Último
Último (20)
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!