Skip to content

Instantly share code, notes, and snippets.

@NigelEarle
Last active August 6, 2023 11:27
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NigelEarle/cda46879bdf0727209f3 to your computer and use it in GitHub Desktop.
Save NigelEarle/cda46879bdf0727209f3 to your computer and use it in GitHub Desktop.
A Guide To Regex in JS

What is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern. The search pattern can be used for text search and text replace operations.

When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character, or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations.

String Modifiers

In JavaScript, regular expressions are often used with the two string methods: search() and replace().

The search() method uses an expression to search for a match, and returns the position of the match.

var dev = "Come check us out at devleague!!";
var x = dev.search(/devleague/i);
// x = 22

The replace() method will also accept a string as search argument

var dev = "Visit Manoa!";
var x = str.replace(/manoa/i, "Devleague");
// x = "Visit Devleague"

Regex Modifiers

Modifiers can be used to perform case-insensitive for more global searches

var devleague = /devleague/i;   // Perform case insensitive matching (will find all matches 'devleague' regaurdless of case)
var devleague = /devleague/g;   // Perform a global match (will find all matches rather than stopping after the first match)
var devleague = /devleague/m;   // Perform multiline matching

Regex Patterns

Brackets are used to find a range of characters

[dev]     //Find any of the characters between the brackets
[0-9]     //Find any of the digits between the brackets
(x|y)     //Find any of the alternatives separated with |

Metacharacters are characters with a special meaning (refer to resources below)

\d      //Find a digit
\s      //Find a whitespace character
\b      //Find a match at the beginning or at the end of a word

Quantifiers define quantities

n+      //Matches any string that contains at least one n
n*      //Matches any string that contains zero or more occurrences of n
n?      //Matches any string that contains zero or one occurrences of n

As a small example, if I wanted to look for all the text inside of the <h1> tags in this html page...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hey There~!!</title>
  </head>
  <body>
    <header>
      <span><h1>Hey There!!</h1></span>
    <header>
    <section>
      <div>
        <ul>
          <li>
            <h1>Hola</h1>
          </li>
          <li>
            <h1>Hello!!</h1>
          </li>
          <li>
            <h1>Kon ichiwa</h1>
          </li>
          <li>
            <h1>Ni hao</h1>
          </li>
        </ul
      </div>
    </section
  </body>
</html>

my regex pattern would be (<[a-zA-Z0-9]+>)(.*)(</[a-zA-Z0-9]+>).

The outside parentheses matching all letters a-z with capitalization and numbers 0-9, with html syntax. And the inside parentheses will match all characters inside of those matching tags.

Using the test() method

test() searches a string for a pattern, and returns true or false, depending on the result.

var devleague = /dev/i;
devleague.test("Devleague is the bee's knees!!")      //Returns true because "dev" is included in the string and is case-insensitive.

Using the exec() method

exec() searches a string for a specified pattern, and returns the found text. If no match is found, it returns null.

/dev/.exec("I learned a lot at devleague this summer!");      //Returns 'dev' because it is included in the string. 

Regex Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment