[JavaScript] 文字列を区切り文字で分割する - Splitによる文字列分割
このページのタグ:[JavaScript]
JavaScriptで文字列を区切り文字で分割するコードを紹介します。

概要

文字列を区切り文字で分割するにはSplitメソッドを利用します。Splitメソッドの引数に区切り文字を与えて呼び出すと、分割された文字列配列が戻り値として返ります。

プログラム

Splitメソッドを利用したプログラム例です。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    function proc() {
      var input = document.getElementById("Text1").value;
      var separator = document.getElementById("Text2").value;
      var items = input.split(separator);

      var outControl = document.getElementById("Output1");
      for (var i = 0; i < items.length; i++) {
        outControl.value += items[i] + "\r\n";
      }
    }
  </script>
</head>
<body>
  入力<br/>
  <input id="Text1" type="text" size="80" /><br/>
  区切り文字<br />
  <input id="Text2" type="text" size="80" /><br />
  <input id="Button1" type="button" value="処理" onclick="proc();"/><br />
  結果<br />
  <textarea id="Output1" cols="50" rows="10"></textarea><br />

</body>
</html>

解説

[処理]ボタン(Button1)をクリックすると、proc() 関数を実行して処理をします。
proc()関数では、[入力]欄のテキストボックスに入力された文字を[区切り文字]欄のテキストボックスに入力された文字列で分割します。分割結果は配列形式の items 変数に代入されます。items変数の配列数を取得し、ループ処理により、出力テキストボックスに1要素1行ずつ表示します。

実行結果

上記のHTMLファイルをブラウザで表示します。下図の画面が表示されます。


[入力]欄に"ペンギン,らくだ,しまうま,duck,whale,にわとり"を入力します。[区切り文字]に","を入力しうす。

[処理]ボタンをクリックすると、[入力]欄の文字列を[区切り文字]の文字で分割した結果が下部のテキストボックスに表示されます。


別の入力で処理をしてみます。入力欄に"23 1024 56 21 76"を入力します。区切り文字に" "(スペース)を入力します。


[処理]ボタンをクリックすると、スペースで区切られた要素が表示できます。


区切り文字に全角を入力した場合です。


全角の区切り文字でも分割できます。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)