DEV Community

Kauress
Kauress

Posted on • Updated on

Regex Blah

Regex
Just my notes on Regex. Nothing exciting, just painful.

Introduction

Regex is used to match patterns (dates, birthdays, alphabets etc) by using symbols, letters and flags. Most prevalent for Regex use cases is form validation.

Basics

To construct a regex expression:

1. Literal form:  var pattern = /hello/; 
2. Constructor form: var pattern = new RegExp('hello');

Enter fullscreen mode Exit fullscreen mode

Patterns

1. Exact matches

var pattern = /Doing regex/;
//matches the words 'Doing'and 'regex' with 1 space in between them

Exact match in some user submitted input?

var userInput = "Doing regex";
var pattern = new RegExp(userInput);

Enter fullscreen mode Exit fullscreen mode

2. Finding a match

  1. Use the test method to find a match between a user-input/test string and pattern
  2. The test method returns either True/False depending on whether a match was found
  3. Example:
    var input= "I like dogs";
    var pattern  = /dogs/;  
    console.log(pattern.test(input));
    // returns true
Enter fullscreen mode Exit fullscreen mode

3. Regex Properties

  1. A regex object has many properties which provide information about the scope of the regex expression
  2. Some of these properties are:

    • global
    • ignorecase
    • unicode
  3. They are depicted by the following flags:
    -g
    -i
    -u

  4. Example:

    var input = "I like dogs";
    var pattern = /dogs/g;
    console.log(pattern.global);
    // returns true

Enter fullscreen mode Exit fullscreen mode
  1. True/False is returned depending on whether OR not a flag is used.

4. Syntax

  1. Using flags will change the context in which a regex expression works
  2. Regex expressions are case sensitive by default
  3. Using the 'i' flag will ensure that casing of the match is ignored. So 'f' and 'F' are both the same
  4. By default only the first instance of a pattern will be matched. In order to find all instances the 'g' (global) flag is used

  5. Example:

      var input = "I like dogs";
      var pattern = /I LIKE DOGS/i; 
      console.log(pattern.test(input));
     //returns true
Enter fullscreen mode Exit fullscreen mode
  1. ES2015 allows for testing of unicode characters.
  2. Example:
     var character = '😂';
     var pattern = /\u{1F602}/u;
     console.log(pattern.test(character);
Enter fullscreen mode Exit fullscreen mode

5. Special characters

  1. Character sets: These allow or matching of characters within a particular character set
  2. A character set can be :
    • certain characters example: 'abc'
    • or a range of characters example: A-Z
3. var input  = "I am a dog"; 
   var pattern = /[jkl]/; 
   console.log(pattern.test(input)); 
   //returns false 

Enter fullscreen mode Exit fullscreen mode
Range

These depict any range of characters to be matched against

 var input = "I like dogs"; 
 var pattern = /[a-zA-Z]/;
 console.log(pattern.test(input));
 // returns true 

Enter fullscreen mode Exit fullscreen mode

Testing for a hyphen

 var numbers = "100-200"; 
 var pattern = /[10-20-]/;
 console.log(pattern.test(numbers));
 // returns true 


Enter fullscreen mode Exit fullscreen mode

Negated Character set

To test for characters NOT within a set use the '^' (hat) symbol

var noLetters = "abcdefghijklmnopqrstuvwxzy"
var pattern = /[^a-z]/
console.log(pattern.test(noLetters));
//returns false


var noNumbers = "abcdefghijklmnopqrstuvwxzy"
var pattern = /[^1-100]/
console.log(pattern.test(noNumbers));
//returns true


Enter fullscreen mode Exit fullscreen mode

Test for "OR"

To test for "or" use the '|'character

var dogOrCat = "dog";
var pattern = /[dog|unicat]/
console.log(pattern.test(dogOrCat));
//returns true

Enter fullscreen mode Exit fullscreen mode

6. Quantifiers

A quantifier allows you to look for a pattern 'x' times. For example:

a. * : Matches a character or set 0 OR more times
b. + : Matches a character or set 1 OR more times
c. {n}: Matches a character or set 'n' times
d. {n, m}: Matches the character or set it follows a minimum 'n' times and maximum 'm' times.

7. Boundaries

a. ^ : Matches from the beginning of the input
b. $ : Matches to the end of the input
c. \b : Matches a boundary between a letter and a non word character such as a space
d: \B : Matches a non word boundary i.e the place between 2 characters of the same type (example letters, spaces).

8. Anchors

^ and $ are known as anchors, we use these when we want to ensure that the entire test string contains ONLY the pattern.

9. Assertions

Reminds me of something I'd have learnt in law school. Assertions allow you to look for patterns conditionally. For example we can match token A only if token B follows. Inside parenthesis ( )'?=' precedes the conditional token. To reverse the assertion use '?!'

var input = 'I love dogs',
pattern = /love(?= dogs)/;

console.log(pattern.test(input)); 
// returns true


Enter fullscreen mode Exit fullscreen mode
var input = 'I love dogs',
pattern = /love(?! dogs)/;

console.log(pattern.test(input)); 
// returns false

Enter fullscreen mode Exit fullscreen mode

10 Exec method

This method executes a search for a pattern in a string. If a match is found then an array is returned else 'null' is returned if there is no match found.

The array contains the matched text as the 1st item, and any matched groups (as enclosed by parenthesis) as items in the array.

var sentence = 'I love dogs',
var pattern = /(love)\s(dogs)/;
console.log(pattern.exec(sentence));
//returns ["love dogs", "love", "dogs"]
Enter fullscreen mode Exit fullscreen mode
var sentence = 'I love dogs',
var pattern = /(love)\s(cats)/;
console.log(pattern.exec(sentence));
//returns null
Enter fullscreen mode Exit fullscreen mode

11. Match method

The match method does the same thing as the exec method, except that it is used on strings and not regex expressions.

var sentence= 'I love dogs';
var pattern = /(love) (dogs)/;
console.log(sentence.match(pattern));
// returns ["love dogs", "love", "dogs"]

Enter fullscreen mode Exit fullscreen mode

12. Search method

The search method is used on a regex expression and searches for a sub-string within the string. If found it will return the index of the sub-string else -1 is returned.

var sentence = 'I love dogs';
var pattern = /I/;
console.log(sentence.search(pattern));
//returns 0

Enter fullscreen mode Exit fullscreen mode

13. Split method

The split method will split a string into an array taking a separator as an argument.

var sentence = 'I love dogs';
var pattern = /\s/;
 console.log(sentence.split(pattern));
// returns ["I", "love", "dogs"]
Enter fullscreen mode Exit fullscreen mode

14. Resources:

Envato Tuts+

Discussion (3)

Collapse
dzinemon profile image
Andrii

Thanks for the post, a very useful content. Could you also provide a few examples for sections 6.Quantifiers, 7.Boundaries and 8.Anchors, please?

Collapse
kauresss profile image
Kauress Author

Hey..sure I'll get down to it..soon!

Collapse
vicoerv profile image
Vico

i use (.*?) most of the time