ITコラム

Be The Change Difference Creative Development Business

JavaScript

2017.11.07

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

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

目次

 
1.replace メソッドとは
2.全て置換する方法

 

1.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>

▲目次へ戻る

2.全て置換する方法

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

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

  
 

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.