[JavaScript]replaceで文字列の置換をする

JavaScriptにはreplaceという置換メソッドがあるわけですが、ネット上にはreplaceの説明はあるもののどうもサンプル例がしっくり来なかったので備忘録を兼ねてメモ。

JavaScriptのreplaceとは？

端的に言うと、指定した文字列を別のものに置換するというものです。

var text = 'Hello World';
var textReplace = text.replace('World', 'JavaScript');
console.log(textReplace)

=> Hello JavaScript

replaceの第一引数で文字列を指定。第二引数で置換したい文字列を記載します。

上記の例ではWorld→JavaScirptに置換しています。なお、大文字・小文字も判別するので注意してください。

置換されないじゃん！と思って3分くらいウロウロしていたらworldと小文字で記載していました。

replaceをこう使った

replaceの基本的なスクリプトだけ見ても使いどころが分からないですよね。

自分はフォームに入力した文字列を動的に表示させる場合に使いました。

フォームに入力してボタンを押せば金額が追加されていくようなイメージです。

フォームに入力された数値を取得→ボタン押下→事前に用意していたHTMLタグの金額の部分だけを置換。←この部分でreplaceを使いました。

// 【前提】金額が格納されている変数としてinputPriceというものがある。
<div class='price'>¥ %price%</div> ←%price%の箇所をフォームに入力されたinpurtPriceに置換したい
hoge.replace('%price%', inputPrice);

分かりやすいように目印を%price%のようにしましたが、これは別の書き方でもOKです。