文字列を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文字を取得します)。
Erik

6
改行で失敗しないように[\s\S]代わりに使用し.ます。
マイクサミュエル

2
すべての行で新しいサイクルを開始することができます。本当に改行がある場合は、おそらく何らかのタイプの遷移を示しています。str.match(/。{1,3} / gm)がより良い選択かもしれません。
ケネベック2011年

1 慎重に: ''.match(/.{1,3}/g)''.match(/.{3}/g)リターンnullの代わりに空の配列。
Web_Designer 2014年

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 cos 3OPで提案されているように変数が可変である場合、これを使用します。正規表現文字列を連結するよりも読みやすいです。
David Tang

それをラップして、すぐに使える便利な関数にできるなら
mmm

1
私はこの(関数の内部)となるだろうので、これは、より高速な正規表現のオプションよりも10倍以上であるjsbench.github.io/#9cb819bf1ce429575f8535a211f72d5a
仕事を

1
私の以前の発言はChromiumにも当てはまります(また、以前のコメントを編集するのが遅すぎたため、新しいコメントも)Firefoxでは現在、私のマシンでは「唯一」30%高速ですが、それでも一貫して優れています。
ジョブ

これは、非常に長いストリングにわたって持続可能ですか?
ジェイコブシュナイダー

22
str.match(/.{3}/g); // => ['abc', 'def', 'ghi', 'jkl']

これは、のために働く3私にとってなく、リターンnull250。🤔
ジム

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

ここでは、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 | e

ここでも同じことを行いますが、配列にプッシュします。

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/にいくつかのテストがあります。テストは、両方の方法が同じようなパフォーマンスを持っていることを示しています。おそらく、一見すると正規表現ソリューションは少し高速ですが、自分で判断してください。


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が、中に.splitARRにグループを追加しては:

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

0

正規表現や明示的なループなしでこれを行う方法は次のとおりです。ただし、1つのライナーの定義を少し拡張しています。

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

少し後で説明しますが、ここでは、サブストリング+配列のプッシュよりも少し速いバリエーションを1つプッシュします。

// 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ループの一部として終了値を事前に計算する方が、部分文字列内でインライン計算を行うよりも高速です。私はFirefoxとChromeの両方でテストしましたが、どちらも高速化を示しています。

ここで試すことができます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.