JavaScript: 文字列を分割する (1)

String.split() 関数

• MDN:String.split()

• TestJS_string_split01.html
  文字列の分割。String.split() のサンプル。

テキストを行に分割する (2023/12)

テキストを行で分割して配列にするときには String.split() を使います。

//テキストを行の配列に分割する
const array = text.split(/\r\n|\n|\r/);

\r や \n は改行を表す文字コードです。 /\r\n|\n|\r/ は正規表現で、 \r\n または \n または \r で分割するという意味です。

◎ 改行コードにはいくつか種類があります

  \r\n    Windows 系の改行
  \n      Linux や HTML などの改行
  \r      昔の Mac の改行

正規表現は不慣れだと意味不明な記号の羅列に見えますが、 最初はこういうおまじないで処理するといった感覚で眺めてください。
文字列の処理: 正規表現 (1)

• TestJS_parse_line01.html
  textarea の文字列を読んでテキストを行単位の配列に分割する。
  

不要な空行を除去する

末尾の空行だけ除去する例

テキストの末尾の不要な空行は String.trimEnd() で除去できます。 trim() の場合はテキストの先頭の不要な空行も除去できます。

// テキストの末尾の空行を除去して行で分割する。
const array = text.trimEnd().split(/\r\n|\n|\r/);
// テキストの先頭と末尾の空行を除去して行で分割する。
const array = text.trim().split(/\r\n|\n|\r/);

Array.filter() で空行を除去する例

下の処理の場合は途中の空行も除去されます。

const array = text.split(/\r\n|\n|\r/).filter( s => s );

1) String.split() で行に分割する。
2) Array.filter() で空行でない行だけ取得する。
   s => s はアロー関数です。 s => 0 < s.length と同じです。
  文字列の長さが 1 以上の場合に true になります。
  s.length = 0 (空文字 "") の場合は false になり配列から削除されます。

空行ではないけどデータ文字列が含まれていない スペースやタブだけの行も削除したい場合もあります。 この場合は s.trim() にします。

// 空行とスペースやタブだけの行を除去する。
const array = text.split(/\r\n|\n|\r/).filter( s => s.trim() );

テキストを2重配列に分割する (2023/12)

区切り文字 で区切られたテキストデータを行と列の 2重配列に分割する話です。 区切り文字にもいくつか種類があります。

◎ 区切り文字の種類

1) カンマ区切り   CSV: Comma-Separated Values
2) タブ区切り     TSV: Tab-Separated Values
3) スペース区切り SSV: space-separated values
  3-A) 1文字のスペースで区切る。
  3-B) 1文字以上の連続したスペースを 1つの区切りとみなす。
など

カンマ区切り (CSV) テキストを2重配列に分割する例

◎ カンマで区切られたデータテキストの例
年月日,平均気温(℃),最低気温(℃),最高気温(℃)
2020/8/1,26.1,21.8,31.8
2020/8/2,26.3,22.6,31.5
2020/8/3,27.2,22.3,32.3

1. テキストを行で分割し、
2. 次に行内のデータを区切り文字で分割します。

配列 (Array) の map(), filter() などの関数とアロー関数を組み合わせると記述が簡素になります。
配列と連想配列
アロー関数
コールバック処理

/** カンマ区切りのテキストをパースして 2重配列にする。
  下の例では空行やスペースのみの行は途中の行も含めてすべて除去します。
  また、値の文字列も trim() します。
 */
function parseCSV(text){
	const array = text.split(/\r\n|\n|\r/).filter( s => s.trim() );
    return array.map( s => s.split(",").map( s => s.trim()) );
}

  s.split(",") を s.split("\t") にするとタブ区切りのテキスト
　のパースになります。

• TestJS_parse_CSV01.html (2023/12)
  CSV のデータテキストを 2重配列に分割する。
  JavaScript で統計処理

スペース区切りのテキスト

スペース区切りのデータテキストは手書きのテキストや プログラムの処理結果を整形したテキストなどでよく出てきます。 連続するスペースを 1つの区切りとして処理したい話もよく出てきます。 正規表現を使って分割します。

// 1文字以上の連続するスペースを 1つの区切りと見なして分割する。
const array = s.split(/ +/);

• TestJS_string_split01.html
  

TSV テキスト

2重配列のテキストは TSV (タブ区切りのテキスト) にすると扱いやすくなります。 タブはデータ文字列の文字として扱うことがめったにないので分割しやすくなります。 スペースやカンマを含んだ文字列もデータ文字列として扱えます。 Web ブラウザでも table の表のテキストをコピーすると TSV テキストになります。
HTML: table タグ

分割のときに細かい処理の仕方が変わります

データテキストを分割 (パース) するときに テキストの内容や用途によって細かい処理の仕方が変わることがあります。

• 例: 不要な空行を除去するか、しないか？
  空行が不要な行か、それとも意味を持つデータか。
  空行を除去する場合でも、1) 末尾の空行だけ除去するか、 2) 先頭の空行も除去するか、3) 途中の空行も除去するか、など。
  また、手書きのテキストでは空行ではないけどデータ文字列を含まない スペースだけの行がまざっていることもあります。
• 例: データ文字列を trim() するか？
  データ文字列の前後のスペースが不要な文字か、意味を持つかデータか。
• 例: 文字列を切り出すだけでなく数値に変換したい。
  パースのときに Array.map(コールバック) 内で Number() や parseInt() などの処理を入れます。

HTML や XML などを読み取るときにも同じような話が出てきます。 スペースやタブや改行が意味を持つか、意味を持たないかなど。

JSON

上のような細かい話にわずらわされたくない、 1行の簡単なプログラムコードでデータを読み書きしたい話になると JSON を使う話になります。

• JavaScript: JSON シリアライズ

• TestJS_json_read_matrix01.html
  2重配列の JSON テキストを読む。

// 2重配列の JSON 文字列を 2重配列のオブジェクトに戻す。
// 下の 1行だけで簡単に戻せます。
const mat = JSON.parse(text);

プログラムの中に正規表現のついた分割処理や 複雑なコールバックのついた Array.filter() や Array.map() の処理を入れなくて済みます。 また 2重配列でも扱いにくい複雑な構造を持つデータも JSON で扱うと簡単になります。

いろいろ

• JavaScript: 文字列を分割する (2) に続く。

関連

• JavaScript: 文字列の処理 (1)
• JavaScript: 文字列を分割する (2)
• JavaScript: 文字列を置換する (1)
• JavaScript: 文字列の処理: 正規表現 (1)
• JavaScript: 文字列の処理: 正規表現 (2)
• JavaScript: テキストデータを読んで処理
• JavaScript: JSON シリアライズ