CodeBlanks Logo Icon CodeBlanks
Login Register

RegExp syntax

JavaScript course · Intermediate · Lesson 118/134

Learn to create patterns with the RegExp literal and object.

What is a RegExp?

A RegExp (regular expression) searches for a pattern inside text. JavaScript gives you two ways to create one: a literal and a constructor.

const literal = /cat/;
const ctor = new RegExp("cat");

Both represent the same pattern. The literal is short and readable; the constructor is handy when you build a pattern at runtime from a string, for example from a user's search term.

Flags

Add a flag at the end of a pattern to change how it behaves. The three most common flags are:

  • i — case-insensitive matching
  • g — find all matches (global)
  • m — multiline mode
/cat/i.test("Cat"); // true

With the constructor the flag is the second argument: new RegExp("cat", "i").

Exercise Test a cat pattern

Assign a regex literal matching "cat" to catPattern. Then test it on the string "concatenate" with .test() and log the result with console.log.

Show example solution 
/cat/. The test method returns true/false.
Example solution:
let catPattern = /cat/;
console.log(catPattern.test("concatenate"));

Test yourself

  1. Which is a valid RegExp literal?

    • "/cat/"
    • /cat/
    • RegExp("cat")
    • #cat#
    Show answer

    /cat/ — Correct! /cat/ is a regex literal; it goes between two slashes.

  2. Make a dog pattern literal

    const dogPattern = ____;
console.log(dogPattern.test("hotdog"));
    Show answer 
    const dogPattern = /dog/;
console.log(dogPattern.test("hotdog"));

  3. Match the creation forms

    /cat/
    literal
    new RegExp('cat')
    constructor
    /cat/i
    case-insensitive
    /cat/g
    global

  4. Which flag makes matching case-insensitive?

    • i
    • g
    • m
    • s
    Show answer

    i — Correct! The i flag turns off case sensitivity.

All lessons in Intermediate

1 Arrow functions

  1. Arrow function syntax
  2. Single-line and block body
  3. Parameters with arrows
  4. The this context
  5. Arrow vs function
  6. Summary - Arrow functions

2 Scope

  1. Global scope
  2. Function scope
  3. Block scope
  4. Variable shadowing
  5. Hoisting
  6. Summary - Scope

3 Closures

  1. What is a closure?
  2. Factory functions
  3. Immediately Invoked Function Expressions
  4. The module pattern
  5. Closure pitfalls
  6. Summary - Closures

4 DOM basics

  1. What is the DOM?
  2. getElementById
  3. querySelector
  4. querySelectorAll
  5. textContent and innerText
  6. Summary - DOM basics

5 DOM manipulation

  1. Creating elements with createElement
  2. appendChild and removeChild
  3. The classList API
  4. setAttribute and removeAttribute
  5. innerHTML and insertAdjacentHTML
  6. Summary - DOM manipulation

6 Events

  1. addEventListener basics
  2. Click events
  3. Mouse events
  4. Keyboard events
  5. The event object
  6. Summary - Events

7 Event handling

  1. Event bubbling
  2. stopPropagation
  3. Event delegation
  4. preventDefault
  5. once and passive options
  6. Summary - Event handling

8 Local storage

  1. localStorage basics
  2. sessionStorage
  3. Storing data with JSON
  4. Clearing storage
  5. Storage events
  6. Summary - Local storage

9 Project: To-do app

  1. Project: To-do app
  2. UI skeleton
  3. Adding a task
  4. Completing and deleting a task - DOM
  5. Project final - To-do DOM

10 Forms

  1. Accessing form elements
  2. Reading input values
  3. The form submit event
  4. Basic validation
  5. Checkbox and radio
  6. Summary - Forms

11 Timers

  1. setTimeout
  2. setInterval
  3. Stopping with clearInterval
  4. requestAnimationFrame
  5. Timer cleanup
  6. Summary - Timers

12 Callbacks

  1. Callback functions
  2. Asynchronous callbacks
  3. Error-first callbacks
  4. Callback hell
  5. Managing callbacks
  6. Summary - Callbacks

13 Promises

  1. What is a promise?
  2. Catching success with then
  3. Catching errors with catch
  4. Cleanup with finally
  5. Promise.all and Promise.race
  6. Summary - Promises

14 async/await

  1. async functions
  2. The await operator
  3. Async error handling
  4. Parallel await
  5. await expressions
  6. Summary - async/await

15 Fetch API

  1. fetch basics
  2. Reading JSON
  3. HTTP headers
  4. POST requests
  5. HTTP error handling
  6. Summary - Fetch API

16 Project: Weather panel

  1. Project: Weather panel
  2. UI and city input
  3. Fetching data with fetch
  4. Rendering data to the DOM
  5. Project final - Weather panel

17 Project: Gallery app

  1. Project: Gallery app
  2. Fetching the image list
  3. Building the gallery grid
  4. Large image view
  5. Project final - Gallery

18 Error handling

  1. Custom error classes
  2. Error propagation
  3. Multiple catch patterns
  4. Async error strategies
  5. Global error handling
  6. Summary - Error handling

19 JSON

  1. The JSON format
  2. JSON.parse
  3. JSON.stringify
  4. structuredClone
  5. JSON limitations
  6. Summary - JSON

20 Date and time

  1. Creating Date objects
  2. Reading date components
  3. Formatting dates
  4. Intl.DateTimeFormat
  5. Date arithmetic
  6. Summary - Date and time

21 RegExp basics

  1. RegExp syntax
  2. Character classes
  3. Quantifiers
  4. test and match
  5. replace and split with regex
  6. Summary - RegExp basics

22 Modules

  1. What is a module?
  2. Named export
  3. Default export
  4. The import statement
  5. Module vs script
  6. Summary - Modules

23 Intermediate final

  1. Challenge - DOM app
  2. Challenge - Async flow
  3. Challenge - Form and storage
  4. Challenge - Timers and animation
  5. Challenge - Modular structure