JavaScriptのsplit()メソッドは指定の「区切り文字」で文字列を分割する事のできるメソッドです。分割された文字は、配列で取得できます。
本コラムでは、split()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. split()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 空白で区切って文字列を分割する方法
2.2. カンマ区切りで文字列を分割する方法
2.3. 正規表現を使って文字列を分割する方法
2.4. 改行コードで文字列を分割する方法
2.5. 区切り文字に「""」を指定して部分文字列を取得する方法
1. split()メソッド
1.1. split()メソッドの基本書式
●split()メソッド
stringObj.split([delimiter], [limit]])
1.2. パラメーター
[delimiter]:
(省略可能)文字列を区切る為の「区切り文字(delimiter)」を指定します。delimiterには、1文字以上の文字や記号、正規表現を指定する事ができます。delimiter(区切り文字)を指定しない場合は、元の文字列は分割されません。
[limit]:
(省略可能)分割結果の上限数を指定を指定します。
1.3. 戻り値
区切り文字(delimiter)で分割された文字の配列を返します。
2. split()メソッドの使い方
2.1. 空白で区切って文字列を分割する方法
「空白」で区切られた文字列を分割してみましょう。
var stringObj = "文字１ 文字２ 文字３"; //分割対象の文字列
stringObj.split(" "); //Stringオブジェクトをスペースで分割する
サンプルHTMLの「JS_Sample1.html」をコピーして保存する場合は、ファイル形式を「utf-8」にします。
splitメソッドに区切り文字の空白(スペース)をダブルクォーテーションで囲って指定します。
●JS_Sample1.html ----------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>split() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、文字列の「リンゴ ミカン バナナ ストロベリー」が分割されて配列に格納されます。</p>
<button onclick="splitFunction01()">splitの実行</button>
<p id="sample1"></p>
<script>
function splitFunction01() {
var stringObj = "リンゴ ミカン バナナ ストロベリー";
var result = stringObj.split(" ");
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
----------------------------
以下「split実行」ボタンをクリックして動きを確認して下さい。分割された文字配列をid属性が「sample2」の段落に表示しています。
●実行結果
ボタンをクリックすると、文字列の「リンゴ ミカン バナナ ストロベリー」が分割されて配列に格納されます。
2.2. カンマ区切りで文字列を分割する方法
次にカンマ「,」で区切られた文字列データーを分割してみましょう。
var stringObj = "文字１,文字２,文字３"; //カンマ区切りの文字列
stringObj.split(","); //Stringオブジェクトをカンマで分割する
●JS_Sample2.html ----------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>split() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、文字列の「リンゴ,ミカン,バナナ,ストロベリー」が分割されて配列に格納されます。</p>
<button onclick="splitFunction02()">splitの実行</button>
<p id="sample2"></p>
<script>
function splitFunction02() {
var stringObj = "リンゴ,ミカン,バナナ,ストロベリー";
var result="";
stringObj.split(',').forEach(
function( value ) {
result= result+value+"<br>";
})
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
----------------------------
splitメソッドでカンマ区切りのデータを分割し、forEach文で処理しています。分割した文字にHTMLの改行コード「<br>」を追加していますので、ブラウザー上で各データーが改行されて表示されます。
●実行結果
ボタンをクリックすると、文字列の「リンゴ,ミカン,バナナ,ストロベリー」が分割されて配列に格納されます。
2.3. 正規表現を使って文字列を分割する方法
区切り文字として「正規表現」を使う事もできます。
var stringObj = "文字１[区切文字]文字２[区切文字]文字３"; //分割対象の文字列
stringObj.split(正規表現); //Stringオブジェクトを正規表現で分割する
●JS_Sample3.html ----------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>split() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、文字列の「リンゴ1ミカン2バナナ3ストロベリー4」が分割されて配列に格納されます。</p>
<button onclick="splitFunction03()">splitの実行</button>
<p id="sample3"></p>
<script>
function splitFunction03() {
var stringObj = "リンゴ1ミカン2バナナ3ストロベリー4";
var result="";
var splitStrObj= stringObj.split(/\d/);
for (i = 0; i < splitStrObj.length-1; i++) {
result= result + "[" + i +"] " + splitStrObj[i] +"<br>";
}
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
----------------------------
サンプルコードの文字列は数字の「1, 2, 3, 4」で区切られています。正規表現を使うとこのような文字列データーも分割する事ができます。splitメソッドに正規表現リテラルで数値を表す「/\d/」を指定します。
MDN Web docs-正規表現： https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
●実行結果
ボタンをクリックすると、文字列の「リンゴ1ミカン2バナナ3ストロベリー4」が分割されて配列に格納されます。
2.4. 改行で文字列を分割する方法
改行を含む文字列を分割する場合は、splitメソッドに改行を表す正規表現の「\n」を指定します。
var stringObj =
"文字１
文字２
文字３"; //改行付きの文字列
stringObj.split(改行コード); //Stringオブジェクトを改行で分割する
●JS_Sample4.html ----------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>split() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、テキストエリアで改行された文字が分割されて配列に格納されます。</p>
<p><textarea rows="10" cols="60" id="sample4">
改行テキスト１
改行テキスト２
改行テキスト３
改行テキスト４
改行テキスト５
改行テキスト６</textarea></p>
<button onclick="splitFunction04()">splitの実行</button>
<p id="result4"></p>
<script>
function splitFunction04() {
var stringObj = document.getElementById('sample4').value;
var splitStrObj = stringObj.split(/\n/,20);
var result="";
for (i = 0; i < splitStrObj.length; i++) {
result= result + "[" + i +"] " + splitStrObj[i] +"<br>";
}
document.getElementById("result4").innerHTML = result;
}
</script>
</body>
</html>
----------------------------
サンプルコードでは区切り文字の指定に加え、分割の上限「20」を指定しています。
●実行結果
ボタンをクリックすると、テキストエリアで改行された文字が分割されて配列に格納されます。
2.5. 区切り文字に「""」を指定して部分文字列を取得する方法
splitメソッドの区切り文字に「""」を指定すると、Stringオブジェクトを一文字ずつ分割します。
var stringObj = "文字１"; //分割する文字列
stringObj.split(""); //区切り文字に「""」を指定する
●JS_Sample5.html ----------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>split() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、文字列の「テキスト分割」が一文字ずつ分割されて配列に格納されます。</p>
<button onclick="splitFunction05()">splitの実行</button>
<p id="sample5"></p>
<script>
function splitFunction05() {
var stringObj = "テキスト分割";
var result="";
stringObj.split("").forEach(
function( value ) {
result += value+"<br>";
})
document.getElementById("sample5").innerHTML = result;
}
</script>
</body>
</html>
----------------------------
splitメソッドに引数を指定しないと、Stringオブジェクトの文字列は分割されませんが、「""」を指定すると文字列を一文字ずつ分割します。サンプルコードで動作を確認して下さい。
●実行結果
ボタンをクリックすると、文字列の「テキスト分割」が一文字ずつ分割されて配列に格納されます。
