Pattern matching with template literals in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to match a string starting with 'Hello' using template literals.

Typescript

const greeting = 'Hello, world!';
const match = greeting.[1](/^Hello/);
console.log(match);

Drag options to blanks, or click blank then click option'

Aincludes

BstartsWith

Ctest

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using startsWith instead of match will not work with template literals.

includes only checks for substring presence, not pattern matching.

The match method is used to find matches based on patterns, including template literals with embedded expressions.

2fill in blank

medium

Complete the code to extract the name from a greeting using pattern matching with template literals.

Typescript

const greeting = 'Hello, Alice!';
const pattern = `^Hello, (.+)!$`;
const result = greeting.match(new RegExp(pattern));
const name = result.[1](1);
console.log(name);

Drag options to blanks, or click blank then click option'

Aget

Bat

Cslice

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using index or get will cause errors because they are not array methods.

Using slice returns a subarray, not a single string.

The at(1) method accesses the first captured group from the match result array.

3fill in blank

hard

Fix the error in the code to correctly test if a string matches a pattern using template literals.

Typescript

const input = 'user123';
const pattern = new RegExp(`^user\\d+$`);
const isMatch = pattern.[1](input);
console.log(isMatch);

Drag options to blanks, or click blank then click option'

Atest

Bsearch

Cincludes

Dmatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using match returns an array, not a boolean.

includes and search are not methods of RegExp.

The test method of a RegExp returns true or false if the string matches the pattern.

4fill in blank

hard

Fill both blanks to create a function that extracts the domain from an email using pattern matching with template literals.

Typescript

function getDomain(email: string) {
  const regex = new RegExp(`@(.+)[1]`);
  const match = email.match(regex);
  return match.[2](1) || null;
}

console.log(getDomain('[e-mail]'));

Drag options to blanks, or click blank then click option'

A$

Bat

C[0]

D^

Attempts:

3 left

💡 Hint

Common Mistakes

Using '^' instead of '$' will match the start, not the end.

Using [0] returns the full match, not the captured group.

The regex uses $ to match the end of the string. The at(1) method accesses the first captured group which is the domain.

5fill in blank

hard

Fill all three blanks to create a function that validates and extracts year, month, and day from a date string using template literal pattern matching.

Typescript

function parseDate(dateStr: string) {
  const regex = new RegExp(`^(\d{ [1] })-(\d{ [2] })-(\d{ [3] })$`);
  const match = dateStr.match(regex);
  if (!match) return null;
  return {
    year: match.at(1),
    month: match.at(2),
    day: match.at(3)
  };
}

console.log(parseDate('2023-06-15'));

Drag options to blanks, or click blank then click option'

A4

B2

C3

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong digit counts will cause the regex not to match valid dates.

Mixing up the order of year, month, day in the regex.

The year has 4 digits, month and day have 2 digits each. The regex captures these groups accordingly.