How to Split Strings by Regex in TypeScript

One of the powerful methods is using regular expressions (regex) for splitting strings in Typescript. In this Typescript tutorial, I will show you how to split string by regex in TypeScript with practical examples.

To split a string using a regex in TypeScript, use the split method of the string object. Provide the regex pattern as the first argument to this method. For example, let result = “Hello World from TypeScript”.split(/\s/); will split the string at every whitespace, returning an array of substrings.

Table of Contents

Split Strings by Regex in TypeScript

Regex can be used to check if a string contains the specified search pattern in Typescript. TypeScript inherits JavaScript’s String.prototype.split method, which divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array. The split method can take a regular expression as its separator.

The basic syntax of the split method in TypeScript is as follows:

string.split(separator, limit);

separator: The pattern describing where each split should occur. It can be a simple string or a regex.
limit: An integer that specifies the number of splits; items after the split limit will not be included in the array.

Example:

let text = "Hello World from TypeScript";
let result = text.split(" ");
console.log(result); // ["Hello", "World", "from", "TypeScript"]

Now, let us see a few examples of how to Split Strings by Regex in TypeScript.

Example-1: Split Using Regex

Split a string using a regex pattern in Typescript. For example, split a string by any white space character (\s).

let text = "Hello World from TypeScript";
let regex = /\s/;
let result = text.split(regex);
console.log(result);

You can see the output in the screenshot below once you run the code using Visual Studio Code.

[ 'Hello', 'World', 'from', 'TypeScript' ]

Example-2: Split Using Complex Regex

Now, let us see how to Split a string by multiple conditions. For instance, split by space or comma followed by a space. Here is the complete code:

let text = "Hello, World, from TypeScript";
let regex = /,?\s/;
let result = text.split(regex);
console.log(result);

You can see the output in the screenshot below.

How to Split Strings by Regex in TypeScript

Example-3: Split Using using Regex for special cases

Sometimes, the text might contain elements that could be mistaken for regex symbols. For such cases, it’s important to escape these characters. Here is an example of splitting Strings by Regex in TypeScript with special cases.

Here is the complete code:

let text = "Split this where you see a period. Like here.";
let regex = /\./;
let result = text.split(regex);
console.log(result);

Example-4: Split a String with Regex in Typescript with Capturing Groups

One powerful feature of regex is capturing groups, which can be used to include the separators in the result array. Here is a complete example of how to split a string with regex in Typescript with capturing groups.

function splitStringWithCapturingGroup(input: string): string[] {
    const regex = /(\d+)/; // Capture groups of digits
    return input.split(regex);
}

console.log(splitStringWithCapturingGroup("Item1Item2Item3"));

Here, the regex (\d+) captures groups of one or more digits. The split method then includes these digits in the output array. Once you run the Typescript code using VS code, you can see the output below:

["Item", "1", "Item", "2", "Item", "3"]

Example-5: Split a String with Regex in Typescript Using Lookahead and Lookbehind Assertions

Regex lookahead and lookbehind assertions are useful for splitting a string without consuming the characters used for the split. Here is an example:

function splitStringWithAssertions(input: string): string[] {
    const regex = /(?<=\d)(?=\D)/; // Lookbehind for a digit and lookahead for a non-digit
    return input.split(regex);
}

console.log(splitStringWithAssertions("1a2b3c"));

Once you execute the code, you can see the output below:

["1", "a", "2", "b", "3", "c"]

This regex uses a positive lookbehind (?<=\d) to check for a digit and a positive lookahead (?=\D) to check for a non-digit character.

Conclusion

Splitting strings using regular expressions in TypeScript is a powerful technique that offers flexibility and efficiency, especially when dealing with complex string patterns. In this Typescript tutorial, I have explained how to split strings by regex in Typescript with a few practical examples.