こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。
この記事では、 JavaScriptで指定した区切り文字で文字列を分割できるsplitメソッドについて
- splitメソッドとは
- サンプルプログラム
と、丁寧に解説していきます。
目次
前提条件:実行環境について
実行環境は以下の通りです。
OS | Windows10 |
---|
splitメソッドとは
splitメソッドとは、文字列を指定した区切り文字で分割して配列を作成して返すメソッドです。
splitメソッドは以下のように使います。
1 |
【分割したい文字列】.split(【区切り文字】, 【分割する数】) |
splitメソッドの引数は第一引数、第二引数ともに任意です。
第二引数について注意点が2点あります。
1点目は、文字列を分割して格納する最大の要素数であるということです。
指定した数に要素数が達した場合、それ以降の文字列は配列に格納されません。
2点目は、「0」を指定した場合、分割そのものがされない点です。
第二引数を指定する場合は、ご注意ください。
splitメソッドのサンプルは以下になります。
1 2 |
var sample = 'テスト/ほげほげ/テスト' var result = sample.split('/', 2); |
上記のサンプルだとresultには
1 2 |
0:テスト 1:ほげほげ |
という配列が返されます。
では、次の章で実際に使ってみます。
splitメソッドを解説するプログラムの概要
splitメソッドを解説するプログラムでは、
- HTML
- JavaScript
の2ファイルを使います。
JavaScriptで
- 最大分割回数を指定しないで分割
- 最大分割回数を指定して分割
のパターンで結果をHTMLに表示させます。
フォルダ構成は以下のようになっています。
HTMLサンプルプログラム
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>splitサンプル</title> </head> <body> <h1>分割する文字列</h1> <div id="splitStr"></div> <h1>最大分割回数を指定しないで分割</h1> <div id="divSplitArray"></div> <h1>最大分割回数を指定して分割</h1> <div id="divSplitArraySpecify"></div> <script src="js\sample_javascript.js"></script> </body> </html> |
HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。
JavaScriptサンプルプログラム
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var splitStr = 'リンゴ/オレンジ/さくらんぼ/ナシ/モモ'; var divSplitStr = document.getElementById('splitStr'); divSplitStr.innerHTML = splitStr; // 最大分割回数を指定しないで分割 var splitArray = splitStr.split('/'); var divSplitArray = document.getElementById('divSplitArray'); divSplitArray.innerHTML = displayResult(splitArray); // 最大分割回数を指定して分割 var splitArraySpecify = splitStr.split('/', 2); var divSplitArraySpecify = document.getElementById('divSplitArraySpecify'); divSplitArraySpecify.innerHTML = displayResult(splitArraySpecify); // 実行結果の分を作成 function displayResult(array) { var result = ''; for (let i = 0; i < array.length; i++) { result += i + '番目:' + array[i] + '<br >'; } return result; } |
- getElementByIdメソッド
- innerHTMLプロパティ
については、こちらの記事をご参考ください。
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します
innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します
実行結果
作成したHTMLをブラウザで開きます。
splitメソッドで指定した区切り文字で分割でき、最大分割回数を指定したときのみ分割を制限できていることが確認できました。
まとめ:splitメソッドを使ってみよう!
以上がJavaScriptのsplitメソッドについての解説でした!
あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ
コメント