JavaScriptで正規表現を使ってをURLを判定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで正規表現を使ってをURLを判定する方法について現役エンジニアが解説しています。正規表現とは文字列をメタ文字を使って表現する方法です。URLを判定するにはhttpかhttpsの後に/(スラッシュ)が2つ続き、その後に文字列が続くという正規表現を利用します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで正規表現を使ってをURLを判定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで正規表現を使ってをURLを判定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

正規表現とは

正規表現とは、一言で言い表すと「文字列の集合を一つの文字列で表現する方法」のことを指します。では、「文字列」とはどういうものを指すかというと、「文字を並べたもの」のことを指します。

以下に表現するものは「文字列」になります。

test
abcde
Hello World

 

正規表現の使い方

正規表現で使用する文字は、a~zなどの通常の文字と「メタ文字」といわれる特別な意味を含むいくつかの文字を使用して表現します。正規表現には欠かせない、メタ文字の解説をしていきます。

メタ文字

.   ^   $   [   ]   *   +   ?   |   (   )
  • 「.」 はあらゆる1文字を表す
    正規表現:a…. 検索可能文字列:abcde, aaaaa, abvv
  • 「^」は行頭の指定を行う
    正規表現:^a..c 検索可能文字列:abbc, accc, aabc
  • 「$」は行末の指定を行う
    正規表現:…bc$ 検索可能文字列:abcbc, accbc, aaabc
  • []はカッコ内で指定した文字の検索
    正規表現:a[bcd]bc 検索可能文字列:abbc, acbc, adbc
  • 「*」 は*の直前の文字が0個以上連続する
    正規表現:a*bc 検索可能文字列:abc, aaabc, aaaaaaaaabc
  • 「+」は+の直前の文字が1個以上連続する
    正規表現:a+bc 検索可能文字列:aabc, aaabc, aaaabc
  • 「?」は?の直前の文字が0~1個の検索
    正規表現:a?bc 検索可能文字列:abc, aabc
  • 「|」は|で区切られた文字列のいづれか
    正規表現:abc|bcd|cde 検索可能文字列:abc, bcd, cde
  • 「()」は()でくくられた文字を1文字としてグループ化する
    正規表現:(ab)?cd 検索可能文字列:abcd, cd

 

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

URLを判定する方法

URLを検索する場合にまずはURLの構造的な特徴を考えてみます。

  • 先頭が 「http」か「https」で始まる
  • あとに必ず「://」と続く
  • その後は様々な文字や記号がでてくる

以上を踏まえるとURLを検索する正規表現は以下のようになります。

https?://[\w!?/\+\-_~=;\.,*&@#$%\(\)\’\[\]]+

言葉で説明すると、http://またはhttps://で始まり、英単語か記号が1文字以上ある文字列を検索する、となります。

まとめ

正規表現は、メタ文字などを覚えるまでは、複雑で読みにくい文字列ですが、バラバラな位置にある同条件の文字列を探すのにとても役立ちます。

基本的なメタ文字だけでも覚えておくことで、プログラミングの幅が広がりますので、ぜひ覚えておきましょう。

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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