JavaScriptのreplaceを使って文字列を置換する方法

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

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

    JavaScriptのreplace()メソッドを使って文字列を置換する方法について。本コラムでは、replace()メソッドの使い方をサンプルコードと共に解説します。

    目次

    1. replace()メソッド

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

    ●replace()メソッド

    stringObj.replace(searchvalue, newvalue)

    ▲ページトップへ戻る

    1.2. パラメーター

    searchvalue:置換対象の文字列を指定します。searchvalueは、newvalueで置き換えられます。searchvalueに正規表現を指定する事もできます。

    newvalue:対象の文字列をnewvalueで置き換えます。newvalueには関数を指定して文字列を置換する事もできます。

    ▲ページトップへ戻る

    1.3. 戻り値

    置換後の新しい文字列を返します。

    ▲ページトップへ戻る

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

    2.1. 特定の文字列を置換する方法

    文章の特定の文字列を置換する場合には、JavaScriptのreplaceメソッドで部分文字列を置換する事ができます。

    var stringObj = "置換対象の部分文字列を含む文字列";
    stringObj.replace("置換対象の文字", "置換する文字"); //Stringオブジェクトの一部分を置換する

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

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

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>replace() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列で置換されます。</p>
    <button onclick="strFunction01()">replaceの実行</button>
    <p id="sample1"></p>
    <script>
    function strFunction01() {
    var strObj = "replace メソッドは、文字列を置換するメソッドです。";
    var result = strObj.replace("メソッド", "method");
    document.getElementById("sample1").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------------

    「replace実行」ボタンをクリックして動きを確認して下さい。文字列「replace メソッドは、文字列を置換するメソッドです。」の内、日本語カナの「メソッド」を英語の「method」に置換します。但しStringオブジェクト内の全ての「メソッド」という文字列を置換するのではなく、一番最初に検索された文字列を置換します。

    ●実行結果

    ボタンをクリックすると、指定の文字列で置換されます。

    ▲ページトップへ戻る

    2.2. 正規表現を使って該当の文字列を置換する方法

    置換対象の文字列を「正規表現」を使って指定する方法を確認してみましょう。

    var stringObj = "置換対象の部分文字列を含む文字列";
    stringObj.replace(正規表現, "置換する文字"); //Stringオブジェクトの一部分を置換する

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

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>replace() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列で置換されます。</p>
    <p id="sample2">replace Methodは、文字列を置換するmethodです。</p>
    <button onclick="strFunction02()">replaceの実行</button>
    <script>
    function strFunction02() {
    var strObj = document.getElementById("sample2").innerHTML;
    var result = strObj.replace(/method/g, "メソッド");
    document.getElementById("sample2").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------------

    置換対象文字列に正規表現の「g(global)オプション」を付けて、対象文字列が複数あった場合に、全ての文字列を置換します。サンプルコードでは、英字の「method」を日本語カナの「メソッド」に置換します。置換対象の文字列に含まれる一番最初の「Method」は最初の一文字が大文字の「M」の為置換対象とはなりません。2番目の「method」のみが置換されます。

    ●実行結果

    ボタンをクリックすると、指定の文字列で置換されます。

    replace Methodは、文字列を置換するmethodです。

    ▲ページトップへ戻る

    2.3. 正規表現を使って大文字小文字を無視して文字列を置換する方法

    正規表現の「gi」オプションを使うと、大文字、小文字の違いを無視(ignore)して文字列を置換します。

    var stringObj = "置換対象の部分文字列を含む文字列";
    stringObj.replace(正規表現, "置換する文字"); //Stringオブジェクトの一部分を置換する

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

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>replace() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列で置換されます。</p>
    <p id="sample3">Replace Methodは、文字列を置換するmethodです。</p>
    <button onclick="strFunction03()">replaceの実行</button>
    <script>
    function strFunction03() {
    var strObj = document.getElementById("sample3").innerHTML;
    var result = strObj.replace(/method/gi, "メソッド");
    document.getElementById("sample3").innerHTML = result;
    }
    </script>
    </body>
    </html>
    --------------------------

    正規表現に「gi」オプションを付けると、大文字・小文字の区別なしに該当の文字列を全て置換する事ができます。

    ●実行結果

    ボタンをクリックすると、指定の文字列で置換されます。

    Replace Methodは、文字列を置換するmethodです。

    ▲ページトップへ戻る

    2.4. replaceメソッドの引数に関数を使う方法

    置換する文字列に「関数」を指定する事もできます。

    var stringObj = "置換対象の部分文字列を含む文字列";
    stringObj.replace(置換対象の文字列, 関数); //Stringオブジェクトの一部分を置換する

    ●JS_Sample4.html --------------------------

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>replace() method - Introduction to JavaScript</title>
    <body>
    <p>ボタンをクリックすると、指定の文字列で置換されます。</p>
    <p id="sample4">Replace Methodは、文字列を置換するmethodです。</p>
    <button onclick="strFunction04()">replaceの実行</button>
    <script>
    function strFunction04() {
    var str = document.getElementById("sample4").innerHTML;
    var txt = str.replace(/replace|method|/gi, function (x) {
    return x.toUpperCase();
    });
    document.getElementById("sample4").innerHTML = txt;
    }
    </script>
    </body>
    </html>
    --------------------------

    置換対象の文字列である「replece」と「method」を第二引数の関数を使って大文字に変換するサンプルコードです。ボタンをクリックすると、小文字から大文字に変換されますので確認してみて下さい。

    ●実行結果

    ボタンをクリックすると、指定の文字列で置換されます。

    Replace Methodは、文字列を置換するmethodです。

    ▲ページトップへ戻る

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

    月額単価50万円〜90万円
    勤務地 東京都 渋谷区
    年収300万円〜400万円
    勤務地 東京都 中央区
    月額単価60万円〜75万円
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【JavaScript/GO】アプリ開発エンジニア ★eスポーツアプリの開発

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

    【業務内容】 自社サービスとして展開しているeスポーツアプリの開発に携わっていただきます。 【環...

    フリーランス

    【Ruby/HTML5】サーバサイドエンジニア ★Webサイト内検索サービスのバックエンド開発

    【業務内容】 自社でWebサイト内検索サービスを展開している企業内で下記業務をメインに対応していただ...

    正社員

    【Java/Ruby】エンジニア|自社サービスの開発・マネジメント

    年収 :300万円〜400万円

    ◆システムのほとんどを社内のメンバーで開発、運用しています。 サービスをカタチにしていく企画会議...

    株式会社ラクーンホールディングス

    フリーランス

    【Ruby】Web開発エンジニア★フォトスタジオサイトのリニューアル

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

    ウェディングフォトスタジオや衣装レンタルのWebサイトリニューアルしておりそちらにも携わっていただき...