jQueryで文字列をバラバラに分割できるsplit()を扱う方法のご紹介です。split()は文字列に含まれる,(カンマ)や/(スラッシュ)等の特定の文字で分割し、配列として返してくれますので、csvデータをカンマで分割したり、改行の箇所で分割したりといろいろと使えますね。
目次
split()の基本的な使い方
まずはsplit()での基本的な文字列の分割方法をご紹介します。
文字列を特定の文字で分割
まずは文字列を特定の文字で分割してみましょう。
以下のサンプルでは、電話番号を-(ハイフン)で分割し、分割した番号のみを配列で返しています。
jQuery
|
1 2 3 4 5 6 7 8 |
// 文字列を変数に格納 var str = '03-1234-5678'; // 文字列をハイフンで分割 var res = str.split('-'); // 分割した値が入る配列をコンソールログに出力 console.log(res); |
結果（コンソール）
以下のようにコンソールログに分割した配列が表示されるかと思います。
[“03”, “1234”, “5678”]
構文
split()は以下のような構文になります。
str.split(区切り文字列, 制限する数)
split()は文字列しか処理できません。
split()のさまざまな使い方
次にsplit()でのいろいろな文字列の分割方法をご紹介します。
文字列を特定の個数のみ分割
split()は分割する配列の値の数も制限できます。第二引数に制限する数を指定します。
以下のサンプルでは8つの区切り文字がある文字列のうち、分割した3つの値だけ配列にしています。
jQuery
|
1 2 3 4 5 6 7 8 |
// スラッシュで区切った文字列を変数に格納 var str = 'abc/def/ghi/jkl/mno/pqr/stu/vwx/yz'; // 3つの値に制限して分割 var res = str.split('/', 3); // コンソールログに出力 console.log(res); |
結果（コンソール）
以下のように文字列のうち3つ目までが分割された配列が表示されるかと思います。
制限を超えた値は削除されます。
[“abc”, ” def”, ” ghi”]
文字列を正規表現を使って分割
split()は正規表現も指定できます。
以下のサンプルでは、半角空白の正規表現を指定し、半角で文字列を分割してコンソールログに配列の中身を表示しています。
jQuery
|
1 2 3 4 5 6 |
// 空白で区切った文字列を変数に格納 var str = '東京 神田 秋葉原'; // 半角空白の正規表現で指定 var res = str.split(/\s+/); console.log(res); |
結果（コンソール）
以下のようにコンソールログに空白で分割した配列が表示されるかと思います。
ちなみに正規表現ではなく、split(' ')と引数にスペースで指定しても同様の処理ができます。
[“東京”, “神田”, “秋葉原”]
文字列を一文字ずつ分割
split()は文字列を区切り文字を使わずに1文字ずつ分割することもできます。
以下のサンプルでは、数字を1文字ずつ分割してコンソールログに配列の中身を表示しています。
jQuery
|
1 2 3 4 5 6 7 8 |
// 文字列を変数に格納 var str = '123456789'; // 引数に''を指定 var res = str.split(''); // コンソールログに出力 console.log(res); |
結果（コンソール）
以下のようにコンソールログに1文字ずつ分割した配列が表示されるかと思います。
[“1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”]
以下のように引数にクォーテーションを並べるだけです。
str.split('')
文字列を改行で分割
文字列を改行コードで分割することもできます。テキストエリアのフォームの値を処理したりとなにかと使えるかと思います。
以下のサンプルでは、テキストエリアの文字列を改行ごとに1行ずつ分割しています。
HTML
|
1 2 3 4 5 6 7 |
<!-- テキストエリアに改行して入力 --> <textarea> ABCDEFG HIJKLMN OPQRSTU VWXYZ </textarea> |
jQuery
|
1 2 3 4 5 6 7 8 |
// HTMLフォームのテキストエリアの値を変数に格納 var textarea = $('textarea').val(); // 引数に改行コードを指定 var arr = textarea.split(/\r\n|\r|\n/); // コンソールログに出力 console.log(arr); |
結果（コンソール）
以下のようにコンソールログに改行ごとに分割した配列が表示されるかと思います。
[“ABCDEFG”, “HIJKLMN”, “OPQRSTU”, “VWXYZ”, “”]
分割した配列の出力
split()で分割した値が格納された配列を出力する方法までを見ていきましょう。
配列の特定の値を取得
複数の分割した値が入る配列の中から、特定の値だけを取り出します。
以下のサンプルでは、配列が格納された変数resの一番最初の値のみをHTMLに表示させます。
jQuery
|
1 2 3 4 5 6 |
// 配列の特定の値を取得 var str = '新宿, 渋谷, 池袋'; var res = str.split(','); // 配列の1番目の値のみコンソールログに出力 console.log(res[0]); |
結果
以下のようにHTMLに配列の最初の値が表示されるかと思います。
新宿
配列に取得したい0から始まるインデックス番号を指定すると、その値のみ取得できます。
res[インデックス番号]
インデックス番号は0から始まる順番なのでres[0]はresという配列の中で一番目の値ということになります。
res[2]であれば3番目の値になりますね。
分割した配列をループで出力
split()で分割した値が格納された配列をeach()でループさせ、文字列として出力する方法をご紹介します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 文字列を分解 var str = '03-1234-5678'; var res = str.split('-'); // 出力用の要素を作成 var html = '<ul>'; $.each(res, function(index, val) { html += '<li>'+val+'</li>'; }); html += '</ul>'; // HTMLに出力 $('div').append(html); |
結果
以下のようにHTMLに改行ごとに分割した配列が表示されるかと思います。
- 03
- 1234
- 5678
each()を使ったループ処理は以下の記事でご確認ください。
参考：jQueryのeach()で複数の要素、配列、オブジェクトをループ処理
ファイル名の拡張子を表示
ここでは実践的なサンプルとして、ファイル名から拡張子だけを抜き出す方法をご紹介します。
jQuery
|
1 2 3 4 5 6 7 8 |
// ファイル名を変数に格納 var file_name = 'photo.jpg'; // ファイル名を.で分割し拡張子部分を取得 var ext = file_name.split('.')[1]; // 拡張子をHTMLに出力 $('p').text(ext); |
結果
以下のように拡張子が表示されるかと思います。
jpg
split()でよくあるエラー
split()でよくあるエラーが、文字列以外を処理してのエラーです。
spilit()は文字列しか処理できませんので、数値型や配列等他の型をsplit()すると以下のようなエラーになります。
Uncaught TypeError: num.split is not a function
「そんな関数はありません」というエラーメッセージがコンソールログに表示されますので、文字列を処理するようにしましょう。
※ブラウザによっては上記のようには表示されず、Array(*)と表示される場合があります。その際は、そのテキストの左にある▶マークをクリックすると上記配列が表示されます。
