Regualar Expressions – Learning RegEx In JavaScript – Creating a Regex Pattern
Regualar Expressions – Learning RegEx In JavaScript – Creating a Regex Pattern
1 0
ac-regex
Class slides: http://anniecannons.github.io/ac-regexOn Github AnnieCannons / ac-regex
Regualar Expressions
Learning RegEx In JavaScript
Getting Started with Regex
- Used throughout JavaScript to match patterns inside strings, most commonly used for validating input
- At first glance, RegEx patterns can look confusing and even intimidating due to their use of Flags, and Characters, but they really are quite simple
var regex = /^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
Creating a Regex Pattern
- Create Regex patterns with:
- the RegExp("pattern") constructor method
- Regex Literals - /pattern/
-
Regex Literals can not contain a string.
- Incorrect - /"dontdoit"/
- Correct - /doit/
var phrase = 'I am a fan of AnnieCannons.';
/** Uses RegExp() Constructor **/
var regex = new RegExp("an");
/** Uses literal value **/
var shorthand = /an/;
var flags = /an/gi;
console.log(phrase.match(shorthand));
/** "an", index: 8, input: "I am a fan of AnnieCannons."] **/
console.log(phrase.match(flags));
/** prints ["an", "An", "an"] **/
Regex Character classes
- Flags come at the end of a regex pattern.
- \g - Global, find ever instance
- \i - Ignore case
- \m
- Character Classes: allow us to specify a range of characters in a sequence.
- \w - match word
- \d - search for number, digit
- \D - omit digit
- \W - omit words
- \s - match any whitespace character
- \S - omit any whitespace character
- [abc] - [range]Match any a,b, or c
- [^abc] - ^ symbol, do not find a, b, or c
- [a-zA-z0-9] - Match any letter or digit
var phrase = 'I am a fan of AnnieCannons.'
var first = /[an]/g
console.log(phrase.match(first));
/** prints ["a", "a", "a", "n", "n", "n", "a", "n", "n", "n"] **/
var second = /[an]/gi
console.log(phrase.match(second));
/** prints ["a", "a", "a", "n", "A", "n", "n", "a", "n", "n", "n"] **/
var third = /[an]/
console.log(phrase.match(third));
/** print ["a", index: 2, input: "I am a fan of AnnieCannons."] **/
var fourth = /\W[an]/ /** Find any a character that does not follow a character (whitespace).
console.log(phrase.match(fourth));
/** prints [" a", " a", " A"] **/
var fifth = /\s/g ** Match any whitespace in our sequence.
console.log(phrase.match(phrase));
/** prints [" ", " ", " ", " ", " "] (All whitespace in phrase variable)**/
Identifying Regex Sequences
- Using /{min,max}/
- Find a set of three digits: /\d{3}/
- Finds a set of 1 to 2 digits:/\d{1,2}/
- Finds 0 or more digit /\d*/
- Finds 1 or more /\d+/
- Matches 0 to 1 digit (optional): /\d?/
Identifying Regex Sequences
var num = '123 234 345';
/** Match 1 to 2 digits */
var one = /\d{1,2}/
/** Matches '12' */
/** Matches '123 ' */
var two = /\d{1,2}3./
/** Match 1 to 2 digits preceeding a 3 and any character following */
/** Match 1 to 2 digits preceeding a 3 and any character following */
var two = /\d{1,2}3./
/** Matches '123 ' */
/**Match 1 to 2 digits that proceed a three, proceeded by any character */
var three = /\d{1,2}3.+/
/** Matches entire string '123 234 345**/
/** Find a 3 in between a digit */
var four = \d3\d/
/** Matches '234' */
/** Match 0 or 1 '23' */
var five = /\23?/
/** Matches FIRST '23', 0 or 1 */
Capture Groups in Regex
-
Allow Us to Capture a group of characters using ()
- Find any 1 proceeded by 23 Ex. var regex = /1(23)/
- Find any 1 proceeded by either 23 or 24 Ex. var regex = /1(23)/
-
We can use quantifiers with our capturing groups to find specific values.
- Ex. One of more digits proceeding either 2 or 5 var regex = /\d+(2|5)/g
var num = '123.234.3456';
var one = /(23)/g
/** Matches '23', '23' */
/** Match any character before a 2 or three */
var three = /.(2|3)/
/** Matches '12', '.2', '.3' */
/** Match any . symbol before a 2 or three */
var three = /\.(2|3)/
/** Matches '.2' , '.3' */
/** Match any digit proceeded by 2 or 5 */
var four = /\d(2|5)/
/** Matches '12', '45' */
/** Match any digit proceeded by zero or one instances of 2 or 5 */
var five = /\d(?=2|5)/g
/** Matches '1', '4' */
THE END
Thank you for your attention!
Regualar Expressions
Learning RegEx In JavaScript
-Eloquent JavaScript