Як я можу розділити рядок на сегменти з n символів?


200

Як видно з назви, у мене є рядок, і я хочу розділити на сегменти з n символів.

Наприклад:

var str = 'abcdefghijkl';

після якоїсь магії n=3, вона стане

var arr = ['abc','def','ghi','jkl'];

Чи є спосіб це зробити?

Відповіді:


358

var str = 'abcdefghijkl';
console.log(str.match(/.{1,3}/g));

Примітка: Використовуйте {1,3}замість того, {3}щоб просто включити залишок для довжин рядків, які не кратні 3, наприклад:

console.log("abcd".match(/.{1,3}/g)); // ["abc", "d"]


Ще кілька тонкощів:

  1. Якщо ваша рядок може містити нові рядки ( які ви хочете вважати символом, а не розділяти рядок ), .вони не захоплюватимуть їх. Використовуйте /[\s\S]{1,3}/замість цього. (Дякую @Mike)
  2. Якщо рядок порожній, він match()повернеться, nullколи вас очікує порожній масив. Захистіть від цього додавання || [].

Таким чином, ви можете закінчити:

var str = 'abcdef \t\r\nghijkl';
var parts = str.match(/[\s\S]{1,3}/g) || [];
console.log(parts);

console.log(''.match(/[\s\S]{1,3}/g) || []);


Це технічно краща відповідь, оскільки він захопить увесь текст із рядка, який не поділяється рівномірно на 3 (він захопить останні 2 або 1 символи).
Ерік

6
Використовуйте [\s\S]замість того, .щоб не провалюватися в нових рядках.
Майк Самуель

2
Ви можете почати новий цикл у кожному рядку. Якщо у вас дійсно є нові рядки, вони, ймовірно, вказують на певний тип переходу. str.match (/. {1,3} / gm) може бути кращим вибором.
kennebec

+1 Обережно: ''.match(/.{1,3}/g) і ''.match(/.{3}/g)повертається nullзамість порожнього масиву.
Web_Designer

4
Чи можлива наявність змінної в місці числа 3?
Ана Клавдія,

46

Якщо ви не хочете використовувати регулярний вираз ...

var chunks = [];

for (var i = 0, charsLength = str.length; i < charsLength; i += 3) {
    chunks.push(str.substring(i, i + 3));
}

jsFiddle .

... інакше рішення регулярного вираження досить добре :)


1
+1, 3оскільки я вважаю за краще це, якщо значення буде змінним, як пропонується в ОП. Це читабельніше, ніж об'єднання рядка regexp.
Девід Тан

якби тільки ви змогли це перетворити на корисну функцію, готову до використання
ммм

1
Це більш ніж у 10 разів швидше, ніж параметр регулярного вираження, тому я б пішов із цим (всередині функції) jsbench.github.io/#9cb819bf1ce429575f8535a211f72d5a
робота

1
Моє попереднє твердження стосується Chromium (також я запізнювався з редагуванням попереднього коментаря, отже нового). На Firefox наразі на моїй машині "лише" на 30% швидше, але це все одно краще.
Робота

це стійко при величезних довжинах струни?
Яків Шнайдер


9

Спираючись на попередні відповіді на це питання; наступна функція розділить рядок ( str) n-число ( size) символів.

function chunk(str, size) {
    return str.match(new RegExp('.{1,' + size + '}', 'g'));
}

Демо

(function() {
  function chunk(str, size) {
    return str.match(new RegExp('.{1,' + size + '}', 'g'));
  }
  
  var str = 'HELLO WORLD';
  println('Simple binary representation:');
  println(chunk(textToBin(str), 8).join('\n'));
  println('\nNow for something crazy:');
  println(chunk(textToHex(str, 4), 8).map(function(h) { return '0x' + h }).join('  '));
  
  // Utiliy functions, you can ignore these.
  function textToBin(text) { return textToBase(text, 2, 8); }
  function textToHex(t, w) { return pad(textToBase(t,16,2), roundUp(t.length, w)*2, '00'); }
  function pad(val, len, chr) { return (repeat(chr, len) + val).slice(-len); }
  function print(text) { document.getElementById('out').innerHTML += (text || ''); }
  function println(text) { print((text || '') + '\n'); }
  function repeat(chr, n) { return new Array(n + 1).join(chr); }
  function textToBase(text, radix, n) {
    return text.split('').reduce(function(result, chr) {
      return result + pad(chr.charCodeAt(0).toString(radix), n, '0');
    }, '');
  }
  function roundUp(numToRound, multiple) { 
    if (multiple === 0) return numToRound;
    var remainder = numToRound % multiple;
    return remainder === 0 ? numToRound : numToRound + multiple - remainder;
  }
}());
#out {
  white-space: pre;
  font-size: 0.8em;
}
<div id="out"></div>


2

Моє рішення (синтаксис ES6):

const source = "8d7f66a9273fc766cd66d1d";
const target = [];
for (
    const array = Array.from(source);
    array.length;
    target.push(array.splice(0,2).join(''), 2));

Ми могли навіть створити функцію за допомогою цього:

function splitStringBySegmentLength(source, segmentLength) {
    if (!segmentLength || segmentLength < 1) throw Error('Segment length must be defined and greater than/equal to 1');
    const target = [];
    for (
        const array = Array.from(source);
        array.length;
        target.push(array.splice(0,segmentLength).join('')));
    return target;
}

Тоді ви можете легко викликати функцію багаторазово:

const source = "8d7f66a9273fc766cd66d1d";
const target = splitStringBySegmentLength(source, 2);

Ура


2
const chunkStr = (str, n, acc) => {     
    if (str.length === 0) {
        return acc
    } else {
        acc.push(str.substring(0, n));
        return chunkStr(str.substring(n), n, acc);
    }
}
const str = 'abcdefghijkl';
const splittedString = chunkStr(str, 3, []);

Чистий розчин без REGEX


1
function chunk(er){
return er.match(/.{1,75}/g).join('\n');
}

Вищенаведена функція - це те, що я використовую для чування Base64 Це створить розрив рядків на 75 символів.


Може також зробити replace(/.{1,75}/g, '$&\n').
alex

1

Тут ми перев'язуємо рядок з іншою рядком кожні n символів:

export const intersperseString = (n: number, intersperseWith: string, str: string): string => {

  let ret = str.slice(0,n), remaining = str;

  while (remaining) {
    let v = remaining.slice(0, n);
    remaining = remaining.slice(v.length);
    ret += intersperseWith + v;
  }

  return ret;

};

якщо ми використовуємо вищезгадане так:

console.log(splitString(3,'|', 'aagaegeage'));

ми отримуємо:

aag | aag | aeg | eag | е

і тут ми робимо те ж саме, але натискаємо на масив:

export const sperseString = (n: number, str: string): Array<string> => {

  let ret = [], remaining = str;

  while (remaining) {
    let v = remaining.slice(0, n);
    remaining = remaining.slice(v.length);
    ret.push(v);
  }

  return ret;

};

а потім запустіть його:

console.log(sperseString(5, 'foobarbaztruck'));

ми отримуємо:

['fooba', 'rbazt', 'ruck']

якщо хтось знає спосіб спростити вищевказаний код, lmk, але він повинен добре працювати для рядків.


ваш перший фрагмент не працював, як очікувалося. Я змінив тут: jsfiddle.net/omarojo/ksvx2txb/261
omarojo

0

Деякі чисті рішення без використання регулярних виразів:

/**
* Create array with maximum chunk length = maxPartSize
* It work safe also for shorter strings than part size
**/
function convertStringToArray(str, maxPartSize){

  const chunkArr = [];
  let leftStr = str;
  do {

    chunkArr.push(leftStr.substring(0, maxPartSize));
    leftStr = leftStr.substring(maxPartSize, leftStr.length);

  } while (leftStr.length > 0);

  return chunkArr;
};

Приклад використання - https://jsfiddle.net/maciejsikora/b6xppj4q/ .

Я також спробував порівняти своє рішення з повторним виразком, який було обрано як правильну відповідь. Деякі тести можна знайти на jsfiddle - https://jsfiddle.net/maciejsikora/2envahrk/ . Тести показують, що обидва способи мають схожі показники, можливо, на перший погляд рішення regexp трохи швидше, але судіть самі.


0

З .split:

var arr = str.split( /(?<=^(?:.{3})+)(?!$)/ )  // [ 'abc', 'def', 'ghi', 'jkl' ]

і .replaceбуде:

var replaced = str.replace( /(?<=^(.{3})+)(?!$)/g, ' || ' )  // 'abc || def || ghi || jkl'



/(?!$)/зупинятися до кінця /$/, без:

var arr      = str.split( /(?<=^(?:.{3})+)/ )        // [ 'abc', 'def', 'ghi', 'jkl' ]     // I don't know why is not [ 'abc', 'def', 'ghi', 'jkl' , '' ], comment?
var replaced = str.replace( /(?<=^(.{3})+)/g, ' || ')  // 'abc || def || ghi || jkl || '

ігнорування групи /(?:... )/не потрібно, .replaceале .splitдодає групи в arr:

var arr = str.split( /(?<=^(.{3})+)(?!$)/ )  // [ 'abc', 'abc', 'def', 'abc', 'ghi', 'abc', 'jkl' ]

0

Ось спосіб це зробити без регулярних виразів або явних циклів, хоча це трохи розтягує визначення одного вкладиша:

const input = 'abcdefghijlkm';

// Change `3` to the desired split length.
const output = input.split('').reduce((s, c) => {let l = s.length-1; (s[l] && s[l].length < 3) ? s[l] += c : s.push(c); return s;}, []);

console.log(output);  // output: [ 'abc', 'def', 'ghi', 'jlk', 'm' ]

Він працює, розбиваючи рядок на масив окремих символів, а потім використовуючи Array.reduceітерацію над кожним символом. Зазвичай reduceповертається одне значення, але в цьому випадку одне значення буває масивом, і коли ми передаємо кожен символ, ми додаємо його до останнього елемента в цьому масиві. Як тільки останній елемент масиву досягне цільової довжини, ми додаємо новий елемент масиву.


0

Прийдемо трохи пізніше до дискусії, але тут варіація, яка трохи швидша, ніж підрядка + натискання масиву.

// substring + array push + end precalc
var chunks = [];

for (var i = 0, e = 3, charsLength = str.length; i < charsLength; i += 3, e += 3) {
    chunks.push(str.substring(i, e));
}

Попереднє обчислення кінцевого значення як частини циклу for for швидше, ніж виконання вбудованої математики всередині підрядка. Я перевірив його як у Firefox, так і в Chrome, і вони обидва демонструють швидкість.

Ви можете спробувати тут

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.