Разбиение строки по первому пробелу: regex в JavaScript

Быстрый ответ

Чтобы разделить строку на подстроки по первому пробелу, можно воспользоваться методом split в JavaScript. Данный метод принимает два аргумента: регулярное выражение (/\s/) и лимит 2. Первый аргумент указывает на пробельный символ, второй же определяет количество разбиений. Таким образом, строка будет разделена только по первому встреченному пробелу.

const str = "Разделить здесь и не после";
const [first, rest] = str.split(/\s/, 2);
console.log(first); // Выведет "Разделить"
console.log(rest);  // Выведет "здесь и не после"

Обработка случаев отсутствия пробелов

Не исключайте вероятность случая, когда в строке могут отсутствовать пробелы. Для обработки таких ситуаций следует использовать следующий подход:

const str = "БезПробеловЗдесь";
const parts = str.split(/\s/, 2);
if (parts.length === 1) {
  console.log("Пробел не найден. Строка остается неизменной:", parts[0]);
} else {
  console.log("Первый фрагмент:", parts[0]);
  console.log("Оставшийся текст:", parts[1]);
}

В мире пространства пробелов

Пробел может быть представлен различными символами, такими как табуляция, перенос строки или другие пробельные символы Юникода. Для идентификации таких символов в регулярном выражении используйте \s:

const str = "Раздели\tэту\nстроку";
const [first, rest] = str.split(/\s/, 2);
console.log(first); // Выведет "Раздели"
console.log(rest);  // Выведет "эту\nстроку"

Визуализация

Представим, что предложение — это поезд, каждое слово которого — вагон.

Поезд: 🚂 "Этот_вагон_первый 🛞⬜ все_остальные_вагоны 🛞🛞🛞..."

Используя функцию split с RegExp, мы отсоединяем первый вагон от остальных:

let [firstCar, restOfTheTrain] = sentence.split(/\s(.+)/);

Это приводит к следующему визуальному результату:

Первый Вагон: 🛞⬜
Остальные Вагоны:  🛞🛞🛞...

Задача выполнена одним решительным движением🚀✂️🛞⬜.

Другие варианты разбиения строки

Элегантное разделение с помощью скобок захвата

Скобки захвата позволяют сохранить разделитель в результирующей строке для более изящного разделения:

const str = "Сохранить это разделение";
const [before, space, after] = str.split(/(\s)/);
console.log(before); // "Сохранить"
console.log(space);  // " " — пробел сохранен!
console.log(after);  // "это разделение"

Подробнее об этом расскажет наш спикер на видео

Использование lookbehinds приемов из ES2018 для точности

С использование lookbehind из ES2018 можно точнее определить место для разделения без утраты символов:

const str = "Разделить это тоже";
const [first, rest] = str.split(/(?<=^\S+)\s/);
console.log(first); // "Разделить"
console.log(rest);  // "это тоже"

Вариант с поиском и разбиением

Если требуется не только разделить строку, но и найти в ней определенный сегмент, можно использовать метод match:

const str = "Найти и разделить";
const match = str.match(/(\S+)\s(.+)/);
const first = match[1];
const theRest = match[2];
console.log(first); // "Найти"
console.log(theRest);  // "и разделить"

Сценарий со строками, начинающимися с пробелов

Если вы столкнулись со строкой, начинающейся с пробелов, используйте функцию trim для их удаления. Затем с помощью split разделите полученную строку:

const str = "  С началом пробелы";
const [first, rest] = str.trim().split(/\s/, 2);
console.log(first); // "С"
console.log(rest);  // "началом пробелы"

Полезные материалы

1. String.prototype.split() – JavaScript | MDN
2. Метод split() для строк на JavaScript – W3Schools
3. regex101: создание, тестирование и отладка регулярных выражений
4. Спецификация языка ECMAScript® 2024
5. Строки – JavaScript.info
6. YouTube Видео: Манипуляция строками в JavaScript – метод split