ywork2020.com

Title

文字列を分割して配列にする

目次 (INDEX)

String.splitとは

ここで説明するString.split とは次の語句からなるjavascriptのメソッドです。
string
読み: ストリング
意味: 文字列
split
読み: スプリット
意味: 分割

目次に戻る

String.splitメソッドの概要

このsplitはStringオブジェクトのメソッドです。
このメソッドは引数に与えた「区切り文字」で文字列を分割して配列を返します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

##String.prototype.split([separator][, limit])

separatorには区切りに使用する文字、または正規表現を指定します。 separatorを省略することも可能ですが、文字列全体が含まれる配列[0]が返されます。 またseparatorが空文字の場合は1文字毎の配列を返します。

limitは分割に上限数を設ける場合に整数で指定します。 これは指定した数を上限とする配列として返り、それ以降は切り捨てとなります。

目次に戻る

サンプルコードと実行結果

このサンプルではinput要素text型にテキストを入力したと仮定しています。 テキストは「ABC,DEF,GHI」とカンマで区切った3つの文字列です。 これをsplitメソッドを使って配列に変換して結果をli要素としてul要素内に挿入します。

サンプルコード: HTML
<body>
	<p><input id="idInput" type="text" value="ABC,DEF,GHI" disabled></p>
	<ul id="idOutput"><!--li要素の挿入--></ul>
</body>
  • 02: input要素 (この要素のvalue値がsplitメソッドによる分割対象です。編集不可にしています。)
  • 03: ul要素 (splitメソッドによる分割の結果配列をli要素に内包して、この要素内に出力します。)
サンプルコード: script
<script>
	let elmInput = document.getElementById("idInput");
	let elmOutput = document.getElementById("idOutput");
	let arrSplit = elmInput.value.split(",");
	for(i = 0; i < arrSplit.length; i++){
		elmOutput.insertAdjacentHTML("beforeend", "<li>" + arrSplit[i] + "</li>");
	}
</script>
  • 02: 変数 elmInput (idInputの要素を参照するために定義します。)
  • 03: 変数 elmOutput (idOutputの要素を参照するために定義します。)
  • 04: 配列 arrSplit (elmInputのvalue値をsplit(",")で配列に変換した結果を代入します。)
  • 05-07: 制御文 for (arrSplitの配列数に応じて0~配列数-1の範囲で繰り返し処理をします。変数iは配列インデックスとして使用します。)
  • 06: 結果出力(elmOutput内にli要素と共に結果配列を出力します。配列のインデックス番号はiで取得しています。)
実行結果:

サンプルテキスト: id="idInput" 編集不可

結果: id="idOutput"

    目次に戻る