Split string on the first white space occurrence

javascript

string-manipulation

regular-expressions

edge-cases

byNikita Barsukov·Mar 7, 2025

To split a string on the first whitespace, utilize JavaScript's split method with a regular expression (/\s/) which identifies the whitespace, and a limit (2) to ensure the string only splits once at the first encountered whitespace.

const str = "Split here and not after";
const [first, rest] = str.split(/\s/, 2);
console.log(first); // "Split" - because why split up a good thing?
console.log(rest);  // "here and not after" - we leave the rest to you!

Handling no-space scenarios

It's vital to deal with edge cases where there is no whitespace in the string. Here’s a defensive approach that checks if the string has been split:

const str = "NoSpacesHere";
const parts = str.split(/\s/, 2);
if (parts.length === 1) {
  console.log("No white space found. String remains whole:", parts[0]); // one is the loneliest number!
} else {
  console.log("First segment:", parts[0]); // be the first, be the best!
  console.log("Remaining segment:", parts[1]); // to the rest we say, cheer up, it's ok to be second!
}

Deep in the whitespace jungle

In some scenarios, the whitespace is more than a space character. It can represent tabs (\t), line feeds (\n), or other Unicode space characters. To overcome these clever impostors, use \s in your regular expression:

const str = "Split\tthis\nstring";
const [first, rest] = str.split(/\s/, 2);
console.log(first); // "Split" - quick cut, clean break!
console.log(rest);  // "this\nstring" - rest assured, this part is rested!

More ways to split a string

Split with style using capturing parentheses

You can use capturing parentheses to keep the delimiter in the result for a suave split:

const str = "Preserve this split";
const [before, space, after] = str.split(/(\s)/);
console.log(before); // "Preserve" - we keep it safe!
console.log(space);  // " " - Space: the final frontier!
console.log(after);  // "this split" - split happily ever after!

ES2018 lookbehinds for precision

Lookbehind Assertions in ES2018 let you define a split point without splitting any characters:

const str = "Split this, as well";
const [first, rest] = str.split(/(?<=^\S+)\s/);
console.log(first); // "Split" - it’s a split decision!
console.log(rest);  // "this, as well" - well, well, well!

Match lost and split found

An alternative is to replace split with match in your arsenal of string manipulation:

const str = "Match and split";
const [arr, first, theRest] = str.match(/(\S+)\s(.+)/);
console.log(first); // "Match" - success is a match away!
console.log(theRest);  // "and split" - split and conquer!

Leading whitespace edge case

If leading whitespace dares to interrupt your string, trim it first before splitting:

const str = "  Leading whitespace";
const [first, rest] = str.trim().split(/\s/, 2);
console.log(first); // "Leading" - leading the way!
console.log(rest);  // "whitespace" - white spaces, assemble!