REGULAR EXPRESSIONSREGULAR EXPRESSIONS
WHAT IS REGULAR EXPRESSION?WHAT IS REGULAR EXPRESSION?
A regular expression, regex or regexp (sometimes
called a rational expression) is a sequence of characters
that de ne a search pattern.
Wikipedia
MDN
JS book
WHERE DO WE USE REGULAR EXPRESSIONS?WHERE DO WE USE REGULAR EXPRESSIONS?
Search engines
Data validation
Data scraping (especially web scraping)
Data wrangling
Parsing
PATTERNS AND FLAGSPATTERNS AND FLAGS
PATTERNSPATTERNS
The “long” syntax:
The “short” one, using slashes "/":
Inserting variables in string:
let regexp = new RegExp("pattern", "flags");1
let regexp = /pattern/; // no flags
let regexp = /pattern/g; // with flags g
1
2
let language = 'JavaScript';
let regexp = new RegExp(`${language} is the awesome!`);
1
2
FLAGSFLAGS
i (case-insensitive search)
g (the search looks for all matches)
y (“Sticky” mode)
u (full unicode support)
m (multiline mode)
s (“dotall” mode)
SEARCHING: STR.MATCH()SEARCHING: STR.MATCH()
1. If the regular expression has ag g, it returns an array
of all matches:
2. Otherwise returns only the rst match in the form of
an array with additional information:
3. If there are no matches, null is returned:
let res = 'We will we will'.match(/we/gi); // We we1
let res = 'We will we will'.match(/we/); // we groups index1
let res = 'JavaScript'.match(/HTML/); // null1
METACHARACTERSMETACHARACTERS
SETS AND RANGES [...]SETS AND RANGES [...]
A bracket expression. Matches a single character that is
contained within the brackets.
Square brackets may also contain character ranges.
Besides normal ranges, there are “excluding” ranges
that look like [^…]. const matches = 'Mop top
wop'.match(/[^tm]op/gi) // wop
let matches = 'Mop top'.match(/[tm]op/gi) // Mop top1
let matches = 'Zebra Zebrb Zebrz'.match(/Zebr[a-z]/gi) // Zebra1
CHARACTER CLASSESCHARACTER CLASSES
d (“d” is from “digit”) - same as [0-9]
s (“s” is from “space”) - same as [ trnvf]
w (“w” is from “word”) - same as [A-Za-z0-9_]
D - non-digits - same as [^0-9]
S – all but s - same as [^ trnvf]
W – all but w - same as [^A-Za-z0-9_]
"." - any character except a newline (any character
with 's' ag)
QUANTIFIERS +, *, ? AND {N}QUANTIFIERS +, *, ? AND {N}
The exact count: {n}
The range: {n, m}, match n-m times:
The range without upper limit: {n,}
let answer = "I'm 12345 years old".match(/d{5}/); // "12345"1
let answer = "I'm 1234 years old".match(/d{3,5}/); // "1234"1
let answer = "I'm 345678 years old".match(/d{3,}/); // "3456781
QUANTIFIERS +, *, ? AND {N}QUANTIFIERS +, *, ? AND {N}
+ “one or more” - same as {1,}
? “zero or one” - same as {0,1}
* “zero or more” - same as {0,}
let str = '100 10 1'.match(/d0+/g) ); // 100 101
let res = 'Colour or color?'.match(/colou?r/g); // color colour1
let str = '100 10 1'.match(/d0*/g); // 100, 10, 11
ANCHORS: STRING START ^ AND END $ANCHORS: STRING START ^ AND END $
Examples:
Multiline example:
let regexp = /^Hello.*/; // starts with Hello
let pattern = /.*Bye$/; // ends with Bye'
1
2
let str = `1st place: Winnie
2nd place: Piglet
3rd place: Eeyore`;
let result = str.match(/^d/gm); // 1, 2, 3
1
2
3
4
5
CAPTURING GROUPSCAPTURING GROUPS
Parentheses group characters together:
Parentheses group characters together:
'Gogogo now!'.match(/(go)+/i); // Gogogo1
let str = '<span class="my">';
let regexp = /<(([a-z]+)s*([^>]*))>/;
let result = str.match(regexp);
alert(result[0]); // <span class="my">
alert(result[1]); // span class="my"
alert(result[2]); // span
alert(result[3]); // class="my"</span></span>
1
2
3
4
5
6
7
8
ALTERNATION (OR) |ALTERNATION (OR) |
A usage example:
let res = 'Gray or grey?'.match(/gr(a|e)y/g); // Gray grey1
CONCLUSIONCONCLUSION
Problems:
Can't be used for recursive structures
Can be very slow solving complex logic
THANK YOU FORTHANK YOU FOR
ATTENTION!ATTENTION!

Regular expressions

  • 1.
  • 2.
    WHAT IS REGULAREXPRESSION?WHAT IS REGULAR EXPRESSION? A regular expression, regex or regexp (sometimes called a rational expression) is a sequence of characters that de ne a search pattern. Wikipedia MDN JS book
  • 3.
    WHERE DO WEUSE REGULAR EXPRESSIONS?WHERE DO WE USE REGULAR EXPRESSIONS? Search engines Data validation Data scraping (especially web scraping) Data wrangling Parsing
  • 4.
  • 5.
    PATTERNSPATTERNS The “long” syntax: The“short” one, using slashes "/": Inserting variables in string: let regexp = new RegExp("pattern", "flags");1 let regexp = /pattern/; // no flags let regexp = /pattern/g; // with flags g 1 2 let language = 'JavaScript'; let regexp = new RegExp(`${language} is the awesome!`); 1 2
  • 6.
    FLAGSFLAGS i (case-insensitive search) g(the search looks for all matches) y (“Sticky” mode) u (full unicode support) m (multiline mode) s (“dotall” mode)
  • 7.
    SEARCHING: STR.MATCH()SEARCHING: STR.MATCH() 1.If the regular expression has ag g, it returns an array of all matches: 2. Otherwise returns only the rst match in the form of an array with additional information: 3. If there are no matches, null is returned: let res = 'We will we will'.match(/we/gi); // We we1 let res = 'We will we will'.match(/we/); // we groups index1 let res = 'JavaScript'.match(/HTML/); // null1
  • 8.
  • 9.
    SETS AND RANGES[...]SETS AND RANGES [...] A bracket expression. Matches a single character that is contained within the brackets. Square brackets may also contain character ranges. Besides normal ranges, there are “excluding” ranges that look like [^…]. const matches = 'Mop top wop'.match(/[^tm]op/gi) // wop let matches = 'Mop top'.match(/[tm]op/gi) // Mop top1 let matches = 'Zebra Zebrb Zebrz'.match(/Zebr[a-z]/gi) // Zebra1
  • 10.
    CHARACTER CLASSESCHARACTER CLASSES d(“d” is from “digit”) - same as [0-9] s (“s” is from “space”) - same as [ trnvf] w (“w” is from “word”) - same as [A-Za-z0-9_] D - non-digits - same as [^0-9] S – all but s - same as [^ trnvf] W – all but w - same as [^A-Za-z0-9_] "." - any character except a newline (any character with 's' ag)
  • 11.
    QUANTIFIERS +, *,? AND {N}QUANTIFIERS +, *, ? AND {N} The exact count: {n} The range: {n, m}, match n-m times: The range without upper limit: {n,} let answer = "I'm 12345 years old".match(/d{5}/); // "12345"1 let answer = "I'm 1234 years old".match(/d{3,5}/); // "1234"1 let answer = "I'm 345678 years old".match(/d{3,}/); // "3456781
  • 12.
    QUANTIFIERS +, *,? AND {N}QUANTIFIERS +, *, ? AND {N} + “one or more” - same as {1,} ? “zero or one” - same as {0,1} * “zero or more” - same as {0,} let str = '100 10 1'.match(/d0+/g) ); // 100 101 let res = 'Colour or color?'.match(/colou?r/g); // color colour1 let str = '100 10 1'.match(/d0*/g); // 100, 10, 11
  • 13.
    ANCHORS: STRING START^ AND END $ANCHORS: STRING START ^ AND END $ Examples: Multiline example: let regexp = /^Hello.*/; // starts with Hello let pattern = /.*Bye$/; // ends with Bye' 1 2 let str = `1st place: Winnie 2nd place: Piglet 3rd place: Eeyore`; let result = str.match(/^d/gm); // 1, 2, 3 1 2 3 4 5
  • 14.
    CAPTURING GROUPSCAPTURING GROUPS Parenthesesgroup characters together: Parentheses group characters together: 'Gogogo now!'.match(/(go)+/i); // Gogogo1 let str = '<span class="my">'; let regexp = /<(([a-z]+)s*([^>]*))>/; let result = str.match(regexp); alert(result[0]); // <span class="my"> alert(result[1]); // span class="my" alert(result[2]); // span alert(result[3]); // class="my"</span></span> 1 2 3 4 5 6 7 8
  • 15.
    ALTERNATION (OR) |ALTERNATION(OR) | A usage example: let res = 'Gray or grey?'.match(/gr(a|e)y/g); // Gray grey1
  • 16.
    CONCLUSIONCONCLUSION Problems: Can't be usedfor recursive structures Can be very slow solving complex logic
  • 17.
    THANK YOU FORTHANKYOU FOR ATTENTION!ATTENTION!