Javascript学習記録(replaceの使い方)

こんにちは。
大阪のWeb制作会社で働いているゆーたです。
転職して約1年、マークアップやWordPressには慣れてきたので、今後のスキルアップとしてJSの学習記録を残していこうかなと思います。
JQueryについては業務で使用しているのですが、JSについてはあまり理解していなく流石にやばいと思った次第です。。。

replaceの使い方

replaceとは簡単に言うと、ある特定の文字を別の文字に置き換えることができるメゾットです。
例として以下のような感じです。

<script>
           let fruits1 = 'バナナ';
           let all_fruits =fruits1.replace('バナナ', 'ミカン');
           alert(all_fruits);
</script>

let fruits1 = 'バナナ';
※letは変数の際に使用するもの。これによってfruits1=バナナとなる。
fruits1の部分は任意の文字でOK。

let all_fruits =fruits1.replace('バナナ', 'ミカン');
※変数all_fruits=fruits1.replace('バナナ', 'ミカン');という認識。
fruits1に対してreplace(対象の文字, 置換する文字)
ということなので、上記のコードを実装すると以下のようになります。
alertによって下記のようにポップアップ的に表示されます。

複数の文字列を置換するときの書き方

では、複数の文字列を置換する場合はどうしたら良いのでしょうか？
例としてはこんな時。
fruit1に入っている'バナナ,ミカン,バナナ'を全てミカンに変更したいとき。

<script>
   let fruits1 = 'バナナ,ミカン,バナナ';
   let all_fruits =fruits1.replace('バナナ', 'ミカン');
   alert(all_fruits);
</script>

上記のように普通に書いてしまうと以下のように表示されてしまいます。

初めのバナナはミカンに変更されたけど、最後のバナナが変更されていない！！！！！

複数の文字を変えるには上記のような書き方ではダメなようですね...
ではどのように書き換えれば良いのでしょうか？

正解はこちら。

<script>
   let fruits1 = 'バナナ,ミカン,バナナ';
   let all_fruits =fruits1.replace(/バナナ/g, 'ミカン');
   alert(all_fruits);
</script>

/バナナ/g????と思うかもしれないので解説いたします。
要はこういうことのようです。
/ある文字/g
/  /変更したい文字を//の中に書き込みgを記述することで全体を変更することができるようですね。g=グループっていうことなのかな...

使用例

webサイトなどでの使用例としては以下のような感じだと思います。
下の記述は、画面幅が769px以下になると、imgタグにswitchというclass名がついているimg画像の名前を_PCから_SPに変更するというもの。

$(function () {
   var wid = $(window).width();
   if (wid < 769) {
       $('img.switch').each(function () {
           $(this).attr("src", $(this).attr("src").replace('_PC', '_SP'));
       });
   }
});

良くPCとSPで画像を変更したいときありますよね！
そういう場面でこういうのが使えそうな気がします。

twitterやっています！よろしければフォローよろしくお願いします＾＾

twitter
https://twitter.com/trizolyuta