JavaScriptでsplitメソッドを使ってテキストを改行で分割して配列に格納する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでsplitメソッドを使ってテキストを改行で分割して配列に格納する方法について解説しています。splitメソッドで文字列を指定した文字列で分割し、そこから配列を作成する手順を説明します。データを扱う際に頻繁に使うことになる処理なので、必ず流れを覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでsplitメソッドを使ってテキストを改行で分割して配列に格納する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

splitメソッドを使ってテキストを改行で分割して配列に格納する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

splitメソッドとは

splitメソッドとは、文字列を指定した場所で分割するメソッドです。

指定した箇所で分割された配列を返します。

区切りとなる文字を指定する、分割数を指定するといった方法でも使用可能です。

よくあるsplitメソッドの使用例として、CSVファイル(カンマで区切られたファイル)のデータを扱う際にカンマで分割し、データを1つづつ処理する場合に使用されます。

MDNのリファレンスはこちら

 

splitメソッドを使ってテキストを改行で分割して配列に格納する方法

splitメソッドは文字列または文字列が格納された変数に.split()として表記し、使用しましょう。

第1引数に分割する文字を指定する方法もあるものの、今回は正規表現を使って改行を指定します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

正規表現とは

文字の集合体のパターンや法則を表したものです。

たとえば郵便番号は「数字が3つ、ハイフン、数字が4つ」で表せます。

これを正規表現の記述では、\d{3}-\d{4}のように表すことができます。

記述の方法やルールは細かく決まっていることから、正規表現は「文字のパターンを表したもの」と認識しておきましょう。

 

実際に書いてみよう

改行が入力されたテキストエリアを用意します。

そして、このテキストエリアに入力された文章を改行コードで分割して1行ずつの配列にしてみます。

<textarea id='message'>
1行目
2行目
3行目</textarea>

下記のように3行の入力があるテキストエリアができました。

splitメソッドを使うにあたり、改行で分割するように指定するには正規表現を使用します。

改行はブラウザの内部では、\n(バックスラッシュ、エヌ)で保持しています。

この\nをsplitの第1引数に正規表現として指定することで、改行で分割をすることが可能です。

 

const message = document.getElementById('message').value;
console.log(message);
//"1行目
//2行目
//3行目"

const messages = message.split('\n');
console.log(messages);
//["1行目", "2行目", "3行目"]

解説

「document.getElementById(‘message’).value」で、HTMLでテキストエリアに指定したIDのmessageの値(value)を取得します。

「const messages = message.split(‘\n’)」では、取得した改行のある文字列を、さらに改行(\n)で分割した配列を表しました。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptでsplitメソッドを使ってテキスト改行で分割して配列に格納する方法がわかって良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。