Regular expression in javascript
4 likes•3,240 views
The document provides an overview of regular expressions (regex) in JavaScript, including syntax for patterns, anchors, quantifiers, groups, modifiers, and replacements. It also includes examples of using regex to find and replace patterns in text, and practices applying regex to tasks like changing URLs, incrementing IDs, and reformatting dates.
![Syntax (Group & Range)
| or (z|w)o : “zo” and “wo”
(...)
Matches subexpression and remembers the
match
(ab): “abc” -> 1st group match “ab”
(?:...)
Matches subexpression and do not remembers
the match (the match doesn’t in array)
(ab): “abc” -> No group
(?=...) Matches only if there is a following pattern win(?=7): “win” in “win7” not “win95”
(?!...) Matches only if there is not a following pattern win(?!=7): “win8” not “win7”
[...] Range
c[ma-c]: “cm”, “cb” not “cd”
c[A-E0-5]: “cB”, “c1” not c6
[^...] Not in range c[^ab]: “cc” not “ca”](https://image.slidesharecdn.com/regex-151204082725-lva1-app6891/85/Regular-expression-in-javascript-7-320.jpg)
Regular expression in javascript
- 1. toan @vnaking front-end developer at ticketbox.vn Regex in javascript
- 2. Use Regular expressions are used to perform pattern- matching and "search-and-replace" functions on text.
- 3. Basic /pattern/flags ● two forward slashes to show the beginning and end of the pattern ● flags: (optional) indicate how to search (modifier). Ex: /th/g (the g flag means "global" match - i.e. find all)
- 4. Syntax (Anchors) ^ Matches the beginning of input ^a : “alice” not “banana” ^: “a linenand break” => 2 match $ Matches the end of input. a$ : “obama” not “name” . Matches any single character except a newline a.b : “a0b”, “acb” not “ab” b Word boundary bdogb : “dog”, “dog ” not “doggy” B Not word boundary BdogB : “doggy”, “adogg” not “dog”
- 5. Syntax (Anchors) s Whitespace (space, tab, newline,...) sc: matches “a cat” not “xcat” S Not white space Sc: matches “cat” not “a cat” d Digit d: matches “1” in “1abc” D Not digit D: matches “b” in “123b” w Word (alphanumeric character including _) w: matches “a” in “a%” W Not word W: matches “%” in “a%”
- 6. Syntax (Quantifiers) * Matches the preceding character 0 or more times zo* : “z” and “zoo” + Matches the preceding character 1 or more times zo+ : “zoo” not “z” ? Matches the preceding character 0 or 1 time ca?r : only “car” and “cr” {n} Matches exactly n times. o{2} : “fooood” not “bob” {n,} Matches at least n times o{2,} : “fooood” not “bob” {n,m} Matches the preceding character n to m times o{2,3} : “food”, “foood” not “fod”
- 7. Syntax (Group & Range) | or (z|w)o : “zo” and “wo” (...) Matches subexpression and remembers the match (ab): “abc” -> 1st group match “ab” (?:...) Matches subexpression and do not remembers the match (the match doesn’t in array) (ab): “abc” -> No group (?=...) Matches only if there is a following pattern win(?=7): “win” in “win7” not “win95” (?!...) Matches only if there is not a following pattern win(?!=7): “win8” not “win7” [...] Range c[ma-c]: “cm”, “cb” not “cd” c[A-E0-5]: “cB”, “c1” not c6 [^...] Not in range c[^ab]: “cc” not “ca”
- 8. Syntax (Modifier) g global match (find all) /is/g : “this is” => two match i Case-i-nse-nsitive /my/i : “My” and “my” m Multiple line /is/m : “this is”
- 9. Replacement $& insert the whole regex match "1a2b".replace(/d+/g, "($&)") => "(1)a(2)b" $1,… $9 Insert the text matched by one of the first 9 capturing groups. "abc".replace(/(a)(b)(c)/g, "$3$2$1") => "cba" $` Insert the part of the subject string to the left of the regex match "abc".replace(/b/, "$`") => “aac” $' Insert the part of the subject string to the right of the regex match "abc".replace(/b/, "$'") => “acc”
- 10. ● Creating ○ var re = new RegExp("pattern","flags"); or var re = /pattern/flags; ● Testing for matches: ○ /pattern/.test("this-is-a-string"): returns a Boolean telling you whether the string contains a match of the pattern ● Executes a search: ○ /pattern/.exec("this-is-a-string"): returns an array Creating a Regex
- 11. ● Find all http in ticketbox’s url and change to https. ○ http://ticketbox.co.th -> https://ticketbox.co.th ○ http://www.ticketbox.vn -> https://www.ticketbox.vn ● find decremented event id by one for all ticketbox event url ○ https://ticketbox.vn/event/saigon-heat-vs-hitech-bangkok-city-34148 -> https: //ticketbox.vn/event/saigon-heat-vs-hitech-bangkok-city-34149 ● Find all date in format dd/mm/yyyy and convert to date ○ 17/11/2015 -> Tue, 17 Nov 2015 ● Swap firstname, lastname in a list of name (split by commas) ○ Toan Nguyen, Vu Phan, Dao Le -> Nguyen Toan, Phan Vu, Le Dao Practices
- 12. Practice "http://ticketbox.vn/event/axwell-ingrosso-41450 http://ticketbox.co.th/saigon-heat-53982 https://ticketbox.co.th/event/fungjailoy-53838 http://TICKETBOX.vn/event/ingrosso-41451 https://ticketbox.vn/event/53982/ticket-booking http://acb.com/fungjailoy-53838".replace (https?://ticketbox.(?:vn|co.th)/event/(?:d|w|-)+(d+)s, function(a, b) { return a.replace(b, parseInt(b)+1)}); Output: "http://ticketbox.vn/event/axwell-ingrosso-41451 http://ticketbox.co.th/saigon-heat-53982 https://ticketbox.co.th/event/fungjailoy-53839 http://TICKETBOX.vn/event/ingrosso-41452 https://ticketbox.vn/event/53982/ticket-booking http://acb.com/fungjailoy-53838"