JavaScript【 replace 】1. 文字列の置換

String オブジェクトのreplace メソッドは、ある文字列を他の文字列に置換する際に使用します。
今回は、このreplace メソッドの使用方法を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. replace メソッドとは

　
String オブジェクトのreplace メソッドは、文字列の置換を行うために用意されたメソッドです。

replace メソッドは、次のように記述します。

文字列変数．replace（　置換前文字列,　置換後文字列　）；

replace メソッドを使用して、「 ／ 」を「 ? 」に置き換えます。
置換ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {

    //一桁の数字を0埋め
    let fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    let dt = new Date();

    document.getElementById("dat").value
        = fm(dt.getMonth() + 1) + "／" + fm(dt.getDate());
});

function repStr() {

    let str = document.getElementById("dat").value;

    //置換処理
    document.getElementById("dat2").value = str.replace("／", "?");
}
</script>

<div style="background-color : #CCC; padding : 20px 10px 1px;">
 　 「 ／ 」を「 ? 」に置換します
    <div style="display:inline-flex;">
      　<input type="text" id="dat">　
        <input type="button" value="置換" onClick="repStr()">　
        <input type="text" id="dat2">
    </div>
</div>

▲目次へ戻る

2. 全て置換する方法

　
先ほどのサンプルと同様の方法で、年月日の表示について「／」を「?」に置換すると、次のようになります。
置換ボタンをクリックしてみて下さい。

　
replaceメソッドを「str.replace("／", "?");」のように使用すると、文字列str の中で、最初に登場する「 ／ 」のみが「 ? 」に置き換えられます。

最初に登場する文字列だけでなく、全ての文字列を置き換えたい場合は、正規表現を用いて記述します。

正規表現

正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンのことです。
JavaScript では、RegExpオブジェクト の execメソッド と test メソッド、Stringオブジェクト の matchメソッド、replaceメソッド、searchメソッド、split メソッド で正規表現が使用できます。

replaceメソッドを使用して、指定した文字列に一致するテキストを全てを置き換えたい場合は、正規表現を用いて、次のように記述します。

文字列変数．replace（　/　置換前文字列　/g,　置換後文字列　）；

このように、スラッシュで囲まれた文字列が、正規表現リテラルのパターンとなります。

正規表現の後ろに記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現リテラルのパターンにマッチする全ての文字列を返します。

replaceメソッドの中で、正規表現とグローバルサーチを記述すると、指定した文字列に一致するテキストを全てを置き換えることができます。

先ほどのサンプルを、正規表現とグローバルサーチを使用して置換すると、次のようになります。
置換ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {

    //一桁の数字を0埋め
    let fm = function(num) {
        num += "";
        if (num.length == 1) {
            num = "0" + num;
        }
        return num;     
    };

    let dt = new Date();

    document.getElementById("dat").value
        = dt.getFullYear() + "／" + fm(dt.getMonth() + 1) + "／" + fm(dt.getDate());
});

function repStr() {

    let str = document.getElementById("dat").value;

    //置換処理
    document.getElementById("dat2").value = str.replace(/／/g, "?");
}
</script>

<div style="background-color : #CCC; padding : 20px 10px 1px;">
 　 「 ／ 」を「 ? 」に置換します
    <div style="display:inline-flex;">
      　<input type="text" id="dat">　
        <input type="button" value="置換" onClick="repStr()">　
        <input type="text" id="dat2">
    </div>
</div>

「str.replace("／", "?");」では 文字列strの中の最初の「／」のみが「?」に置換されましたが、「str.replace(/／/g, "?");」と記述することで、文字列strの中の全ての「／」が「?」に置換されました。

▲目次へ戻る