JavaScript: Split string and keep the separators

String.prototype.split() is a valuable method to split strings based on a delimiter. There often comes a scenario when we want to split a string and keep the separators in the result. The same JavaScript method provides a way to do so.

Before we get into that, for people who are unfamiliar with split(), here’s a quick refresher.

Split()

- Advertisement -

The function can be called on a string with two parameters. The first is the separator on which we want to split the input string. And the second is the limit which is an optional parameter and specifies the number of times that the separator should be matched.

The separator can be a string or a regex.

const inputString = 'The quick brown fox jumps over the lazy dog.';
console.log(inputString.split(" "));
//  ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']

Using regex for the separator:

console.log(inputString.split(/ /));
// ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']

Splitting and keeping the separators

As the MDN docs for Split() state:

When found, separator is removed from the string, and the substrings are returned in an array.

But there is a workaround for regular expressions. Using positive lookaheads, we can assert that the regular expression exists, but not actually match it. In simpler words, if parenthesis, that is ( and ), are used in the separator, matched results are included in the array.

const inputString = 'Hello 1 word. Sentence number 2.'
const splits = inputString.split(/(\d)/)

console.log(splits)
// [ "Hello ", "1", " word. Sentence number ", "2", "." ]

Note: \d matches the character class for digits between 0 and 9.

And thus we can use lookarounds to separate strings and keep the separators too! This opens up easier ways to solve some string-parsing problems.

Recent Articles

How to debug better using $ sign shortcuts in Chrome devtools

Chrome devtools has a collection of utilities that can be used to perform common debugging tasks and make our life easier. The...

Deep copying in JavaScript using structuredClone

For as long as anyone can remember, deep copying in JavaScript was not a built-in feature and we had to resort to...

Chrome devtools: Using logpoints for logging messages directly

When it comes to debugging JavaScript in Chrome devtools, there are two different camps: the console.log fans and the debugger/breakpoint maximalist. I...

How to prevent npm install for unsupported Node.js versions

npm configurations allow us to do quite a lot of nifty things. One of them is to allow the project to set...

How to terminate a process on a port using the command line

Zombie processes are usually a pain to figure out. More often than not, I end up googling about how to terminate a...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.