JavaScript【 split 】 ~ 文字列の分割

colmun_main7649

String オブジェクトのsplit メソッドは、文字列を分割して、配列を作成するメソッドです。
今回は、文字列の分割について紹介します。

目次

 
1.split メソッドとは
2.正規表現を指定して分割
3.改行コードで分割

1.split メソッドとは

 
String オブジェクトのsplit メソッドは、指定したセパレーターで 文字列を部分文字列に分割し、配列として返すメソッドです。

split メソッドは、次のように使用します。

文字列 .split( セパレーター , 分割数 );

セパレーターは、文字列の区切りとなるもので、文字列や正規表現等で指定します。
セパレーター自身は、値として配列の中に格納されません。

分割数は、split メソッドの返り値となる配列について、要素の数の上限値を指定します。
配列の要素数を制限しなくても良い場合は、指定する必要はありません。

split メソッドを使用して、文字列を分割してみます。

var score = "89/78/96/74/81";
var sr = "/";
var aryScore = score.split(sr);


文字列を分割して作られた配列を出力すると、次のように表示されます。

aryScore: 

 
配列データとして分かりやすく表示するために、「 JSON.stringify(aryScore); 」でJSON文字列に変換して表示しています。
(JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。)

上の配列の各要素を出力すると次のように表示され、分割された値が格納されているのが確認できます。

aryScore[0]: 
aryScore[1]: 
aryScore[2]: 
aryScore[3]: 
aryScore[4]: 

▲目次へ戻る

2.正規表現を指定して分割

 
split メソッドのセパレーターに、正規表現を指定することもできます。

正規表現を指定して、文字列を分割してみます。
 

数字で分割

var str = "1安藤2井上3上原4江川5緒方";
var aryStr = str.split(/[0-9]/);

「 /[0-9]/ 」として、数字で区切るように指定しています。

文字列を分割して作られた配列を出力すると、次のように表示されます。

aryStr: 

 
配列データとして分かりやすく表示するために、「 JSON.stringify(aryStr); 」でJSON文字列に変換して表示しています。
(JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。)
 
 
split メソッドとは直接関係ありませんが、上のサンプルのように、空文字の要素ができた場合には、filter メソッドを使用して削除することができます。

var aryStr2 = aryStr.filter(function(e){return e !== "";});

split メソッドは、Arrayオブジェクトで用意されているメソッドで、定義されたコールバック関数を 配列の各要素に対して呼び出し、コールバック関数が true となる値の配列を返します。
(Arrayオブジェクトについては、Arrayオブジェクトとはをご参照下さい。)

コールバック関数「 function(e){return e !== “”;} 」は、要素が空文字でなければ true となるため、空文字でない要素のみの配列が返ります。
 

空文字の要素を削除した結果、配列の中身は次のようになります。

aryStr2: 

 
 

複数の条件で分割

var str = "安藤,井上 上原;江川,緒方";
var aryStr = str.split(/,|;|\s/);

「 /,|;|\s/ 」として、カンマ( , )または セミコロン( ; )または 空白( \s )で区切るように指定しています。

複数の条件で文字列を分割した結果、次のような配列が作成されます。

aryStr: 

 
配列データとして分かりやすく表示するために、「 JSON.stringify(aryStr); 」でJSON文字列に変換して表示しています。
(JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。)

▲目次へ戻る

3.改行コードで分割

 
split メソッドを使用して、改行毎に分割することもできます。

改行コードを指定して、文字列を分割します。
次のテキストエリアに、改行を伴う文字列を入力して、分割ボタンをクリックしてみて下さい。



  

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function dispAry() {

    var ary = document.getElementById("txt").value.split(/\n/);

    document.getElementById("dat").value = JSON.stringify(ary);
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        <textarea id="txt" rows="4" placeholder="改行を伴う文字列を入力して下さい">
        </textarea>
        <input type="button" value="分割" onClick="dispAry()">
  
        <input type="text" id="dat" placeholder="分割後の配列がここに表示されます">
    </form>
</div>

「 /\n/ 」として、改行コード( \n )で区切るように指定しています。

配列データとして分かりやすく表示するために、「 JSON.stringify(ary); 」でJSON文字列に変換して表示しています。
(JSON.stringifyメソッドやJSON文字列については、JSON文字列に変換して比較をご参照下さい。)

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です