Разбиение строки на сегменты по n символов: методы

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

Чтобы разбить строку на группы по n символов, примените следующую функцию:

const splitIntoSegments = (str, n) => str.match(new RegExp(`.{1,${n}}`, 'g')) || [];

Проверим эту функцию на примере:

const segments = splitIntoSegments("YourJavaScriptRocks", 4);

Функция надёжно работает со строками, включая те, которые содержат специальные символы и пробелы.

Подробный анализ магии RegEx

Глубокое погружение в мир RegEx

В данном случае мы применяем регулярное выражение /.{1,n}/g, которое ищет последовательности от одного до n символов вдоль всей строки.

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

Учёт переносов строк и спецсимволов

Для того чтобы учесть в строке переносы строк и специальные символы, поменяйте в шаблоне точку на [\s\S]:

const regexPattern = new RegExp(`[\\s\\S]{1,${n}}`, 'g');
const segments = herMajestyTheString.match(regexPattern) || [];

Ничего не теряется!

Если функция не смогла найти совпадений и вернула null, оператор || [] "спасёт положение", возвращая пустой массив.

Адаптируемся под паттерн

Проверьте функцию в работе с дробными значениями n — в последнем сегменте будут собраны оставшиеся символы.

Подход без regex: да, это не ракетостроение!

Добрый старый цикл for: всегда в строю

Для выделения подстрок можно задействовать цикл for:

function splitStringNonRegex(str, n) {
  let result = [];
  // Перебираем строку, словно ноты в мелодии 
  for (let i = 0; i < str.length; i += n) {
    result.push(str.substring(i, i + n));
  }
  return result;
  // Получаем массив – просто и надёжно.
}

Этот способ прост и надёжен, по достоинству оценит его ваш благородный ancestress of code.

Вдумайтесь!

Борьба с юникодом и эмодзи

JavaScript работает с кодировкой UCS-2, так что при встрече с суррогатными парами могут возникнуть заморочки. В подобных случаях помогут библиотеки вроде lodash/chunk, умеющие работать со сложными символами (например, эмодзи).

Regex: версия Ultron

Знаете про lookbehind assertions? Это то, что поможет вам избегать разрывов строк в неподходящих местах:

/(?<=^(?:.{n})+)(?!$)/

Этот шаблон делает всё тщательно и аккуратно, но его поддержка в JavaScript не всегда есть.

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

Представим строку как поезд, где каждый вагон — это символ:

Поезд (🚂): ["J", "S", " ", "i", "s", " ", "C", "o", "o", "l"]

Деля на сегменты по 3 символа, мы как бы отцепляем каждые три вагона:

splitString(train, 3); // 3 вагона уезжают, где же остальные?

В итоге получаем Сегменты:

Сегмент 1: ["J", "S", " "]
Сегмент 2: ["i", "s", " "]
Сегмент 3: ["C", "o", "o"]
Остаток:   ["l"]

Так мы получаем аккуратно организованные сегменты.

Идём дальше

Хотите увидеть свои сегменты?

Сделаем понятнее:

const visualisedSegments = zeString.replace(new RegExp(`(.{${n}})`, 'g'), '$1-');
// Вставляем дефис, обозначающий границы сегментов.

Пересекающиеся сегменты? Больше не проблема!

Для чёткого разделения прибегните к незахватывающим группам (?:...):

const pattern = new RegExp(`(?:.{${n}})(?!$)`, 'g');
// Захватываем по n символов, но исключаем конец строки. Просто, не так ли?

Магия пустого массива

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

let segments = Array.from({ length: Math.ceil(str.length / n) }, () => '');
// Вот они, пустые будущие контейнеры для сегментов.

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

1. String.prototype.slice() – JavaScript | MDN — Подробно о методе slice().
2. Split large string in n-size chunks in JavaScript – Stack Overflow — Опыт коллег.
3. RegExp – JavaScript | MDN — Паттерн-матчинг становится понятнее.
4. Array.prototype.map() – JavaScript | MDN — Познайте метод map.
5. Regular Expressions :: Eloquent JavaScript — Открытие мира регулярных выражений.
6. Strings — Всё о строках в JavaScript.
7. Array.from() – JavaScript | MDN — Преобразование различных данных в массивы!