JavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法を現役エンジニアが解説【初心者向け】

JavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

 

splitメソッドとは

splitメソッドとは指定した文字列、または正規表現によって文字列を分割できるメソッドです。
 

splitメソッドの使い方

splitメソッドの構文は以下の通りです。

str.split([separator[, limit]])

引数に指定した文字列または正規表現によって文字列が分割され、結果が配列として返ってきます。

たとえば、以下のようにして文字列を分割できます。

var str = "あ、い、う";
var ret = str.split("、");

結果としてretには[“あ”, “い”, “う”]というようにカンマ(、)で区切った文字列が配列として返ってきています。
 

[PR] フロントエンドで副業する学習方法を動画で公開中

正規表現とは

正規表現とは、文字や記号を使って文字列の中の特定部分を指定する表現方法です。

正規表現を使うと、行頭、行末、数値のみを指定したり特定の文字コードを指定したりといった様々な方法で文字列を表現できます。

たとえば以下のように指定すると文章を任意の数値で分割することができます。

var str = "1PCを立ち上げる。2ブラウザを立ち上げる。3エディタを立ち上げる。";
var ret = str.split(/[0-9]/);

結果としてretには[“”, “PCを立ち上げる。”, “ブラウザを立ち上げる。”, “エディタを立ち上げる。”]というように数値で区切った文字列が配列として返ってきています。

strの先頭に数値が入っているのでret配列の先頭は空文字列になっています。
 

分割する時に区切り文字を残す方法

文字列の分割を行う際に区切り文字を残したい場合もあると思います。

以下のように指定すると区切り文字も結果配列に含まれた状態で結果を取得できます。

var str = "あ、い、う";
var ret = str.split(/(?<=、)/g);

結果としてretには(、)というように区切り文字を含んだ文字列が返ってます。
 

実際に書いてみよう

では今までの知識を使って区切り文字を残した状態で文字列の分割を行ってみましょう。

以下のコードでは文章の読点によって文字列の分割を行っています。

var str = "ジョバンニは勢いきおいよく立ちあがりましたが、立って見るともうはっきりとそれを答えることができないのでした。ザネリが前の席からふりかえって、ジョバンニを見てくすっとわらいました。ジョバンニはもうどぎまぎしてまっ赤になってしまいました。先生がまた云いました。「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」　やっぱり星だとジョバンニは思いましたがこんどもすぐに答えることができませんでした。";
var ret = str.split(/(?<=。)/g);

結果としてretには読点(。)によって分割した文字列が入ってきます。
 

まとめ

さて、今回のsplitメソッドによって区切り文字を残しながら文字列を分割する方法はいかがでしたでしょうか。

splitメソッドを使いこなせるようになると様々な場面で文字列をプログラム上で制御することが可能です。

まず実際に使ってみて、その後目的の動作が実現できなかった場合はメソッドの仕様を確認するなどして、様々な使い方を学ぶのが良いと思います。
 

筆者プロフィール

黒木一志（おおたかずき） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

 

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

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