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

初心者向けにJavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法について現役エンジニアが解説しています。splitメソッドとは指定した文字列、または正規表現によって文字列を分割することが出来るメソッドです。正規表現を使って分割すると区切り文字を残すことが出来ます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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には(、)というように区切り文字を含んだ文字列が返ってます。
 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

実際に書いてみよう

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

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

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

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

まとめ

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

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

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

1時間でできる無料体験!

筆者プロフィール

黒木一志(おおたかずき)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。
現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。
みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

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

大石ゆかり

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

 

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する