ITコラム

Be The Change Difference Creative Development Business

JavaScript

2017.11.07

JavaScript【 replace 】１～文字列の置換

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

１．replace メソッドとは

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

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

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

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

　「／」を「 ? 」に置換します

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

<script type="text/javascript">
<!--
window.onload = function(){

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

    var dt = new Date();

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

function repStr() {

    var 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>

▲目次へ戻る

２．全て置換する方法

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

　「／」を「 ? 」に置換します

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

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

正規表現

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

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

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

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

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

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

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

　「／」を「 ? 」に置換します

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

<script type="text/javascript">
<!--
window.onload = function(){

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

    var dt = new Date();

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

function repStr() {

    var 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の中の全ての「／」が「?」に置換されました。

▲目次へ戻る