Split a String on Capital Letters using JavaScript

avatar
Borislav Hadzhiev

Last updated: Jan 9, 2023
3 min

banner

# Split a String on Capital Letters in JavaScript

Call the split() method with a regular expression to split a string on capital letters, e.g. str.split(/(?=[A-Z])/);.

The regular expression uses a positive lookahead assertion to split the string on each capital letter.

index.js
const str = 'BobbyHadzCom'; const result = str.split(/(?=[A-Z])/); // ๐Ÿ‘‡๏ธ [ 'Bobby', 'Hadz', 'Com' ] console.log(result);

split string on capital letters

The only argument we passed to the String.split() method is a regular expression.

The forward slashes / / mark the beginning and end of the regular expression.

The regular expression uses a positive lookahead assertion. Lookahead assertions don't consume a character which allows us to keep the capital letters in the results.

# Dealing with trailing spaces

If your string contains spaces, the substrings in the array will contain trailing spaces.

index.js
const str = 'Bobby Hadz Com'; const result = str.split(/(?=[A-Z])/); // ๐Ÿ‘‡๏ธ [ 'Bobby ', 'Hadz ', 'Com' ] console.log(result);

dealing with trailing spaces

Similarly, if the string starts with a space, you will get an array element that contains a space.

index.js
const str = ' Bobby Hadz Com '; const result = str.split(/(?=[A-Z])/); // ๐Ÿ‘‡๏ธ [ ' ', 'Bobby ', 'Hadz ', 'Com ' ] console.log(result);

We can use the String.trim() and Array.map() methods to handle these edge cases.

index.js
const str = ' Bobby Hadz Com '; const result = str .trim() .split(/(?=[A-Z])/) .map(element => element.trim()); // ๐Ÿ‘‡๏ธ [ 'Bobby', 'Hadz', 'Com' ] console.log(result);

We used the trim() method to remove any leading and trailing spaces from the original string.

index.js
// ๐Ÿ‘‡๏ธ "abc" console.log(' abc '.trim());

We then called the split() method to split the string on each capital letter.

Lastly, we used the Array.map() method to remove any leading or trailing spaces from the strings in the array.

The function we passed to the map() method gets called with each element in the array.

On each iteration, we trim the string to remove the leading and trailing spaces and return the result.

The Array.map method returns a new array that contains the values we returned from the callback function.

If you have to do this often, define a reusable function.

index.js
function splitOnCapital(str) { return str .trim() .split(/(?=[A-Z])/) .map(element => element.trim()); } const str = ' Bobby Hadz Com '; const result = splitOnCapital(str); console.log(result); // ๐Ÿ‘‰๏ธ [ 'Bobby', 'Hadz', 'Com' ]

The splitOnCapital function takes a string and splits it on each capital letter.

# Split a String on Capital Letters using String.match()

Alternatively, you can use the String.match() method.

index.js
function splitOnCapital(str) { return str .trim() .match(/([A-Z]?[^A-Z]*)/g) .map(element => element.trim()) .filter(element => element); } const str = ' Bobby Hadz Com '; const result = splitOnCapital(str); console.log(result); // ๐Ÿ‘‰๏ธ [ 'Bobby', 'Hadz', 'Com' ]

split string on capital letters using string match

The String.match method matches a string against a regular expression.

The method returns an array containing the matches (if any) or null if no matches are found.

The forward slashes / / mark the beginning and end of the regular expression.

The [A-Z] character class matches the capital letters from A to Z.

index.js
function splitOnCapital(str) { return str .trim() .match(/([A-Z]?[^A-Z]*)/g) .map(element => element.trim()) .filter(element => element); }

The question mark ? matches the preceding item (the capital letters) 0 or 1 times.

The caret ^ symbol means "NOT the following".

So, the [^A-Z] character class matches any character that is not a capital letter.

The asterisk * matches the preceding item (non-capital letters) zero or more times.

The g flag is used because we want to match all occurrences of the regular expression and not just the first occurrence.

If you ever need help reading a regular expression, check out this regular expression cheatsheet by MDN.

It contains a table with the name and the meaning of each special character with examples.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev