オーダーメイドコース
icon
icon

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

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

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

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

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

 

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

なお本記事は、TechAcademyのオンラインブートキャンプ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] コーディングで副業する方法とは

実際に書いてみよう

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

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

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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。