JavaScriptで文字列を一定文字数ごとにチャンク分割するには

こういう場面に遭遇

文字列を一定文字数ごとに分割したい
例えば100文字ごととかの感じで
つまり文字列のチャンク分割が必要

少しトリッキーな方法が必要でした。

意外と汎用性も高いと思うので、
文字列を一定文字数ごとに分割する方法をまとめます。

このページの目次

方法１．愚直に文字列を文字数ごと文字列分割
方法２．正規表現で文字数ごとに文字列分割
文字列分割のここまでのまとめ

方法１．愚直に文字列を文字数ごと文字列分割

まずは愚直なやり方から

こういうケースを考えます。

文字列を4文字ごとに分割したい
そして配列として取得したい

そのために書いてみたのが次のコード

▼ 文字列を4文字ごとに分割する

const str = "hogehogefugafuga";
const size = 4;
const numChunks = Math.ceil(str.length / size);
const chunks = new Array(numChunks)
for (var i=0, x=0; i < numChunks; ++i, x += size) {
  chunks[i] = str.substr(x, size)
}
console.log(chunks);

const str = "hogehogefugafuga";

const size = 4;

const numChunks = Math.ceil(str.length / size);

const chunks = new Array(numChunks)

for (var i=0, x=0; i < numChunks; ++i, x += size) {

chunks[i] = str.substr(x, size)

}

console.log(chunks);

▼ このコードの出力結果

(4)[
  "hoge", 
  "hoge", 
  "fuga", 
  "fuga"
]

(4)[

"hoge",

"fuga",

"fuga"

]

本当に愚直で素直なやり方になってます。

でもこれだと汎用性がないですね。

そこで一定文字数に分ける関数を作成しました。

▼ このような関数を作ってみた

function splitByChunk(str, size) {
  const numChunks = Math.ceil(str.length / size)
  const chunks = new Array(numChunks)
  for (let i=0, x=0; i < numChunks; ++i, x += size) {
    chunks[i] = str.substr(x, size)
  }
  return chunks
}

function splitByChunk(str, size) {

const numChunks = Math.ceil(str.length / size)

const chunks = new Array(numChunks)

for (let i=0, x=0; i < numChunks; ++i, x += size) {

chunks[i] = str.substr(x, size)

}

return chunks

}

▼ 文字列を4文字ごとに分割

splitByChunk('hogehogefugafuga', 4);

1	splitByChunk('hogehogefugafuga', 4);

これで汎用性が高くなりました。

まあまあいい方法だと思います。

方法２．正規表現で文字数ごとに文字列分割

次は正規表現を使ったやり方

ここでも先ほどと同じく、4文字ごとに分割します。

▼ そのために書いたコードがコチラ

var str = "hogehogefugafuga";
var chunks = str.match(
  new RegExp('.{1,4}', 'g')
);

var str = "hogehogefugafuga";

var chunks = str.match(

new RegExp('.{1,4}', 'g')

);

▼ このような出力結果

(4) [
  "hoge", 
  "hoge", 
  "fuga", 
  "fuga"
]

(4) [

"hoge",

"fuga",

"fuga"

]

先ほどよりだいぶスマートになりました。

このコードのポイントは '.{1,4}' という正規表現で1文字目～4文字目を繰り返し取得してます。そして 'g' フラグを付けたので、一致した結果のみを配列で返してくれる訳ですね。

そしてこちらも汎用性を高くしてみました。

▼ このように関数化する

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

function splitByChunk(str, size){

return str.match(

new RegExp('.{1,'+size+'}', 'g')

);

}

▼ 文字列を4文字ごとに分割する

splitByChunk('hogehogefugafuga', 4)

1	splitByChunk('hogehogefugafuga', 4)

関数内部が違うだけで使い方は同じです。

関数化するならどちらを利用してもOK

コード的には２つめだと冗長さがないです

文字列分割のここまでのまとめ

ということで簡単にまとめ

愚直に文字列を文字数ごと文字列分割
まずは Math.ceil(str.length / size) でチャンクサイズを計算、そのあとループ内で str.substr(x, size) みたいに一定文字数ごとに分割していく。シンプルで愚直なやり方
正規表現で文字数ごとに文字列分割
分割した文字列に対して new RegExp('.{1,n}', 'g') のような正規表現を適用する。純粋にn文字にマッチさせるのを繰り返しているだけ。シンプルだけどスマートな感じ