JavaScriptのmatchメソッドで文字列を検索する方法

    • このページをはてなブックマークに追加

    公開日:2019年01月10日 最終更新日:2019年09月25日

    JavaScriptのmatch()メソッドを使うと指定の正規表現にマッチした文字列を取得する事ができます。本コラムでは、match()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. match()メソッド

    1.1. match()メソッドの基本書式

    ●match()メソッド

    stringObj.match(regExp)

    ▲ページトップへ戻る

    1.2. パラメーター

    regExp:正規表現を指定します。

    ▲ページトップへ戻る

    1.3. 戻り値

    正規表現でマッチした文字列を配列で返します。マッチした文字列がない場合は、「null」を返します。

    ▲ページトップへ戻る

    2. match()メソッドの使い方

    2.1. 正規表現でマッチする文字列を取得する方法

    match()メソッドの引数に指定した正規表現にマッチする文字列がある場合、結果を配列として取得する事ができます。一番シンプルな正規表現を使ってStringオブジェクトから特定の文字列を取得してみましょう。

    var stringObj = "対象の文字列";
    stringObj.match(正規表現); //正規表現にマッチした文字列を取得する

    サンプルHTMLの「JS_Sample1.html」をコピーして動作を確認して下さい。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。

    ●JS_Sample1.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>match() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
    <button onclick="strFunction01()">matchの実行</button>
    <p id="sample1"></p>
    <script>
    function strFunction01() {
    var strObj = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var result = strObj.match(/ABC/);
    document.getElementById("sample1").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    「match実行」ボタンをクリックすると、Stringオブジェクト「strObj」中に「ABC」とマッチする文字列があるので、ブラウザーにはmatchメソッドの実行結果が表示されます。

    ●サンプルコードの実行結果

    ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。

    ▲ページトップへ戻る

    2.2. グローバルオプションでマッチする文字列を全て取得する方法

    正規表現のグローバルオプション「g」を使うと対象の文字列内で正規表現とマッチする文字列全てを取得する事ができます。

    var stringObj = "対象の文字列";
    stringObj.match(正規表現); //正規表現にマッチした文字列を取得する

    ●JS_Sample2.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>match() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
    <button onclick="strFunction02()">matchの実行</button>
    <p id="sample2"></p>
    <script>
    function strFunction02() {
    var strObj = "検索したい文字列を指定します。";
    var result = strObj.match(/し/g);
    document.getElementById("sample2").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    対象文字列の「検索したい文字列を指定します。」には「し」が二文字あります。ブラウザーには、「し」が二つ入った配列が表示されます。

    ●サンプルコードの実行結果

    ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。

    ▲ページトップへ戻る

    2.3. 大文字小文字を無視してマッチする文字列を取得する方法

    正規表現の「i」オプションを使うと、大文字・小文字の区別なしに文字列を取得する事ができます。

    var stringObj = "対象の文字列";
    stringObj.match(正規表現); //正規表現にマッチした文字列を取得する

    ●JS_Sample3.html --------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>match() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。</p>
    <button onclick="strFunction03()">matchの実行</button>
    <p id="sample3"></p>
    <script>
    function strFunction03() {
    var strObj = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    var result = strObj.match(/[A-C]/gi);
    document.getElementById("sample3").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------

    「i」オプションで大文字・小文字の区別なしに文字列を抽出します。対象のStringオブジェクト「strObj」には大文字と小文字のアルファベットが代入されています。正規表現に指定した文字列は大文字の[A-C]ですが、「i」オプションを付けていますので小文字の"abc"もマッチします。

    ●サンプルコードの実行結果

    ボタンをクリックすると、指定の正規表現にマッチした文字列が表示されます。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    【企業名】株式会社 ブレイン・ラボ

    年収400〜700万円
    勤務地東京都港区

    【企業名】株式会社エートゥジェイ

    年収400〜650万円
    勤務地東京都港区

    【企業名】株式会社アクアビットスパイラルズ

    年収400〜700万円
    勤務地東京都品川区

    株式会社 エイトレッド

    年収400〜600万円
    勤務地東京都渋谷区
    月額単価70万円〜80万円
    勤務地 東京都 渋谷区
    勤務地 大阪府
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【PHP(Laravel)/JavaScript】フルスタックエンジニア★ビッグデータを活用した広告プラットフォーム開発 NEW

    月額単価 :70万円〜80万円

    BtoB向けの来店者計測ツールを活用し収集したビッグデータを基にリアル広告 (チラシ)×Web広告を出稿でき...

    フリーランス

    【JavaScript/Linux/SQL/Python】Webエンジニア★サブスクリプションサービスの管理を行うSaaS開発 NEW

    月額単価 :50万円〜60万円

    サブスクリプションサービスの管理を行うSaaSの開発をPythonを用いてご担当頂きます。 チームは ①本サ...

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL