JavaScriptで部分一致する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで部分一致する方法について現役エンジニアが解説しています。部分一致には正規表現を使います。様々なパターンの文字列を短くまとめて表現する方法です。matchやtestメソッドを使って文字列や数値の形式を判定することが出来ます。

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

JavaScriptで部分一致する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで部分一致する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

正規表現とは

正規表現とは、様々なパターンの文字列を短くまとめて表現する方法です。例えば以下のような正規表現を書くと3桁+4桁の全ての文字列を網羅できます。

/\d{3}-\d{4}/

この表現によって、000-0000から999-9999の全てを表現することができます。

JavaScriptでは、matchやtestメソッドを利用してフォームの内容に間違いがないかを検査のするといった方法で使用されます。

JavaScriptで部分一致する「indexOf」

正規表現以外にも、文字列の検索をする方法があります。

indexOfメソッドは、文字列に対して使用して第1引数に与えた文字が初めてマッチしたインデックスを返します。もしマッチする文字がなければ、-1を返します。
第2引数で、検索を開始する位置を指定できます。設定しない場合は0が代入されます。

書き方は以下の通りです。

var str = "abcde"
str.indexOf("e") // => 4
str.indexOf("h") // => -1
str.indexOf("c",2) // => 2
str.indexOf("c",5) // => -1

 

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

実際に書いてみよう

それでは実際に書いてみましょう。

様々なパターンのマッチングをみて、動作を確認しましょう。

var str = "Hello World"
str.indexOf("Hello") // => 0
str.indexOf("Helloo") // => -1
str.indexOf("World",0) // => 6
str.indexOf("World",6) // => 6
str.indexOf("World",7) // => -1
str.indexOf("",0) // => 0
str.indexOf("",5) // => 5
str.indexOf("",15) // => 11

 

以上で解説を終わります。

 

筆者プロフィール

メンター金成さん。

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

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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