Jak mogę podzielić ciąg na segmenty n znaków?

200

Jak mówi tytuł, mam ciąg i chcę podzielić na segmenty n znaków.

Na przykład:

var str = 'abcdefghijkl';

po odrobinie magii n=3stanie się

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

Czy jest na to sposób?

Ben
źródło

Odpowiedzi:

358

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

Uwaga: Użyj {1,3}zamiast tylko {3}dołączyć resztę dla długości łańcucha, które nie są wielokrotnością 3, np .:

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


Kilka innych subtelności:

  1. Jeśli Twój ciąg może zawierać znaki nowej linii ( które chcesz liczyć jako znak zamiast rozdzielać łańcuch ), to .nie przechwytuje ich. Użyj /[\s\S]{1,3}/zamiast tego. (Dzięki @Mike).
  2. Jeśli Twój ciąg znaków jest pusty, match()wróci, nullgdy będziesz oczekiwać pustej tablicy. Zabezpiecz się przed tym, dołączając || [].

Więc możesz skończyć z:

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) || []);

David Tang
źródło
Jest to technicznie lepsza odpowiedź, ponieważ pobierze cały tekst z ciągu, który nie jest równomiernie podzielny przez 3 (pobierze ostatnie 2 lub 1 znaki).
Erik
6
Użyj [\s\S]zamiast, .aby nie zawieść na nowych liniach.
Mike Samuel,
2
Możesz rozpocząć nowy cykl na każdej linii. Jeśli naprawdę masz nowe linie, prawdopodobnie wskazują one na pewien rodzaj przejścia. str.match (/. {1,3} / gm) może być lepszym wyborem.
kennebec,
+1 Ostrożnie: ''.match(/.{1,3}/g) i ''.match(/.{3}/g)wróć nullzamiast pustej tablicy.
Web_Designer,
4
Czy można mieć zmienną zamiast liczby 3?
Ana Claudia,
46

Jeśli nie chcesz używać wyrażenia regularnego ...

var chunks = [];

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

jsFiddle .

... w przeciwnym razie rozwiązanie wyrażenia regularnego jest całkiem dobre :)

alex
źródło
1
+1 cos Wolałbym to, jeśli 3jest zmienna, jak sugeruje OP. Jest bardziej czytelny niż łączenie wyrażenia regularnego.
David Tang
gdybyś tylko mógł zawinąć to w przydatną funkcję gotową do użycia
mmm,
1
Jest to ponad 10 razy szybsze niż opcja regex, więc wybrałbym
Job
1
Moje poprzednie oświadczenie dotyczy Chromium (również spóźniłem się z edycją poprzedniego komentarza, stąd nowego). W przeglądarce Firefox jest obecnie „tylko” 30% szybszy na moim komputerze, ale wciąż jest to konsekwentnie lepsze.
Job
czy jest to zrównoważone na dużych długościach sznurka?
Jacob Schneider,
22
str.match(/.{3}/g); // => ['abc', 'def', 'ghi', 'jkl']
maerika
źródło
To działa dla 3mnie, ale wraca nullz 250. 🤔
Jim
9

Opierając się na poprzednich odpowiedziach na to pytanie; następująca funkcja podzieli ciąg ( str) liczby n ( size) znaków.

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

Próbny

(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>

Pan Polywhirl
źródło
2

Moje rozwiązanie (składnia ES6):

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

Możemy nawet stworzyć funkcję z tym:

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;
}

Następnie możesz łatwo wywołać funkcję w sposób wielokrotnego użytku:

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

Twoje zdrowie

Jesus Gonzalez
źródło
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, []);

Czyste rozwiązanie bez REGEX

seriouspat
źródło
1
function chunk(er){
return er.match(/.{1,75}/g).join('\n');
}

Powyższa funkcja jest tym, czego używam do dzielenia na Base64. Utworzy to łamanie linii w liczbie 75 znaków.

Dave Brown
źródło
Mógłby również zrobić replace(/.{1,75}/g, '$&\n').
alex
1

Tutaj przeplatamy ciąg z innym ciągiem co n znaków:

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;

};

jeśli wykorzystamy powyższe w ten sposób:

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

otrzymujemy:

aag | aag | aeg | eag | e

i tutaj robimy to samo, ale wypychamy do tablicy:

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;

};

a następnie uruchom:

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

otrzymujemy:

[„fooba”, „rbazt”, „ruck”]

jeśli ktoś zna sposób na uproszczenie powyższego kodu, lmk, ale powinien działać dobrze dla łańcuchów.

Alexander Mills
źródło
Twój pierwszy fragment kodu nie działał zgodnie z oczekiwaniami. Zmodyfikowałem tutaj: jsfiddle.net/omarojo/ksvx2txb/261
omarojo,
0

Niektóre czyste rozwiązania bez użycia wyrażeń regularnych:

/**
* 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;
};

Przykład użycia - https://jsfiddle.net/maciejsikora/b6xppj4q/ .

Próbowałem także porównać moje rozwiązanie, aby regexp wybrać jako właściwą odpowiedź. Niektóre testy można znaleźć na jsfiddle - https://jsfiddle.net/maciejsikora/2envahrk/ . Testy pokazują, że obie metody mają podobną wydajność, być może na pierwszy rzut oka rozwiązanie wyrażenia regularnego jest nieco szybsze, ale osądź je sam.

Maciej Sikora
źródło
0

Z .split:

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

i .replacebędzie:

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



/(?!$)/ma się zatrzymać przed końcem /$/, bez jest:

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 || '

ignorowanie grupy /(?:... )/nie jest konieczne, .replaceale w .splitdodaje grupy do arr:

var arr = str.split( /(?<=^(.{3})+)(?!$)/ )  // [ 'abc', 'abc', 'def', 'abc', 'ghi', 'abc', 'jkl' ]
Денис Дечев
źródło
0

Oto sposób na zrobienie tego bez wyrażeń regularnych lub wyraźnych pętli, choć nieco rozszerza to definicję jednej linijki:

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' ]

Działa poprzez podzielenie łańcucha na tablicę pojedynczych znaków, a następnie Array.reduceiterację każdego znaku. Normalnie reducezwróciłoby pojedynczą wartość, ale w tym przypadku pojedyncza wartość jest tablicą, a gdy przekazujemy każdy znak, dołączamy go do ostatniego elementu w tej tablicy. Gdy ostatni element w tablicy osiągnie docelową długość, dodajemy nowy element tablicy.

Malvineous
źródło
0

Wracam nieco później do dyskusji, ale tutaj jest to wariant nieco szybszy niż substring + tablica push.

// 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));
}

Wstępne obliczanie wartości końcowej jako części pętli for jest szybsze niż wykonywanie wbudowanej matematyki wewnątrz podłańcucha. Przetestowałem to zarówno w Firefoksie, jak i Chrome, i oba pokazują przyspieszenie.

Możesz spróbować tutaj

Dragonaire
źródło