TypeScript String Split

Use the TypeScript String.split() method to divide a string into an array of substrings. You can split by a character, a word, a multi-character delimiter, or a regular expression. An optional limit controls the maximum number of array elements returned.

TypeScript String split() Syntax

</>

Copy

 mystring.split([separator][, limit]);

The method returns a new string[]. It does not modify the original string.

separator: An optional string or regular expression that identifies where the string should be divided.
limit: An optional non-negative integer specifying the maximum number of elements to include in the returned array.

If the separator is not found, the returned array contains the complete original string as its only element. If no separator is supplied, the method also returns an array containing the original string.

Basic TypeScript String Split Example

In this example, the string is split wherever the delimiter -- occurs.

example.ts

</>

Copy

var str = new String("Apple--Basket--Share--Options") 
var splits = str.split("--")
console.log(splits)

Convert this to JavaScript

 tsc example.ts

example.js

</>

Copy

var str = new String("Apple--Basket--Share--Options");
var splits = str.split("--");
console.log(splits);

Run it on a browser.

The resulting array contains four strings:

[ 'Apple', 'Basket', 'Share', 'Options' ]

Split a TypeScript String with a Result Limit

The second argument limits the number of elements placed in the returned array. It does not preserve the unsplit remainder after the limit is reached.

example.ts

</>

Copy

var str = new String("Apple--Basket--Share--Options") 
var splits = str.split("--", 3)
console.log(splits)

Convert this to JavaScript

 tsc example.ts

example.js

</>

Copy

var str = new String("Apple--Basket--Share--Options");
var splits = str.split("--", 3);
console.log(splits);

Run it on a browser.

TypeScript Split String with Limited Splits

Because the limit is 3, only the first three substrings are returned:

[ 'Apple', 'Basket', 'Share' ]

Split a TypeScript String by a Character

Pass a single character as the separator to split a value such as a comma-separated list.

</>

Copy

const fruits: string = "Apple,Banana,Orange";
const fruitList: string[] = fruits.split(",");

console.log(fruitList);

[ 'Apple', 'Banana', 'Orange' ]

The separator itself is not included in the resulting strings.

Split a String into Individual Characters

Use an empty string as the separator to divide a basic string into individual UTF-16 code units.

</>

Copy

const word: string = "Type";
const characters: string[] = word.split("");

console.log(characters);

[ 'T', 'y', 'p', 'e' ]

For text containing emoji or some combined Unicode characters, split("") may divide a visible character into multiple values. Use Array.from() when you need code-point-aware iteration.

</>

Copy

const text: string = "A😊B";
const characters: string[] = Array.from(text);

console.log(characters);

[ 'A', '😊', 'B' ]

Split a TypeScript String by Whitespace

A regular expression can split text containing one or more spaces, tabs, or line breaks. Calling trim() first prevents leading or trailing whitespace from producing empty array elements.

</>

Copy

const sentence: string = "  TypeScript   string\tsplit  ";
const words: string[] = sentence.trim().split(/\s+/);

console.log(words);

[ 'TypeScript', 'string', 'split' ]

Split a TypeScript String with Multiple Delimiters

Use a regular expression when more than one delimiter should be accepted. The following example splits on a comma, semicolon, or vertical bar and also removes surrounding whitespace.

</>

Copy

const values: string = "red, green;blue | yellow";
const colors: string[] = values.split(/\s*[,;|]\s*/);

console.log(colors);

[ 'red', 'green', 'blue', 'yellow' ]

Remove Empty Strings after split()

Repeated delimiters can produce empty strings. Apply filter() when empty elements are not useful.

</>

Copy

const data: string = "Apple,,Banana,,Orange";
const items: string[] = data.split(",").filter((item) => item !== "");

console.log(items);

[ 'Apple', 'Banana', 'Orange' ]

Split a String Only at the First Separator

Using split(separator, 2) returns only two elements, but it discards any later parts. To preserve everything after the first separator, find its index and slice the string.

</>

Copy

const entry: string = "name=Arjun=Admin";
const separator: string = "=";
const separatorIndex: number = entry.indexOf(separator);

const key: string = separatorIndex === -1
    ? entry
    : entry.slice(0, separatorIndex);

const value: string = separatorIndex === -1
    ? ""
    : entry.slice(separatorIndex + separator.length);

console.log(key);
console.log(value);

name
Arjun=Admin

TypeScript split() Return Type and Safe Index Access

split() returns a string[]. Accessing an element by index can still produce undefined when that position does not exist. This is especially relevant when the TypeScript compiler option noUncheckedIndexedAccess is enabled.

</>

Copy

const record: string = "101:Pending";
const parts: string[] = record.split(":");

const id: string = parts[0] ?? "";
const status: string = parts[1] ?? "Unknown";

console.log(id, status);

Use a fallback value, a length check, or array destructuring when the input format may be incomplete.

String Primitives and the String Object

The earlier examples use new String() to retain the original tutorial code. In current TypeScript code, a primitive string is normally preferred over the boxed String object.

</>

Copy

const preferred: string = "Apple--Basket--Share";
const parts: string[] = preferred.split("--");

Common TypeScript String Split Mistakes

Expecting the original string to change: split() returns a new array and leaves the source string unchanged.
Assuming the limit preserves the remainder: split("-", 2) keeps only the first two resulting elements and drops later ones.
Forgetting whitespace around delimiters: splitting "red, green" by a comma produces " green". Use map(item => item.trim()) or a suitable regular expression.
Ignoring empty elements: adjacent, leading, or trailing separators can create empty strings in the result.
Using an unescaped dynamic regular expression: characters such as ., *, +, ?, and | have special meanings in regular expressions.