jQueryで数値をカンマ(コンマ)区切りの金額表示に変更する

jQueryで
・数値にカンマ(コンマ)をつけて、金額表示に変更
・カンマ(コンマ)区切りの金額表示を数値に変更して計算に利用する
・makeshopで[PRICE]/[TAXPRICE]を使用した部分の金額取得方法
をまとめました。

デモはこちら

jQueryで数値をカンマ(コンマ)区切りの金額表示に変更するサンプル

デモはできるだけ楽になるようにコーディングしてるのでソースでみると要素にidがついてません。jsでidの連番を振ってるのでF12でも確認してもらった方がいいかもしれません。

1.金額表示を数値に変更
2.数値を金額表示に変更
3.金額表示に消費税を追加する
4.makeshopの金額表示に数値に変更する

jQuery関連記事

1.金額表示を数値に変更

HTML

<p><span class="money" id="price1">1,234,567,890</span>円</p>
<p><span class="money2" id="result1"></span>円</p>

JavaScript

var price1 = $("#price1").html().replace(/,/g,"");
$("#result1").html(price1);

金額部分を取得するとカンマ(コンマ)が入っているので、文字列として扱われてしまうので.replace()でカンマ(コンマ)を全て消すだけで完了です！
phpでは型変更とかしなきゃいけないですけど、jsは必要ないんで楽ですね！

※.html()で取得した値は文字列で取得してくるので、足し算をするときはparseInt()で数値に変更して下さい。変更しない場合「+」演算子を使うと当然、文字列結合となります。他の演算子なら自動で数値に変更してくれます。

2.数値を金額表示に変更

HTML

<p><span class="money" id="price2">1234567890</span>円</p>
<p><span class="money2" id="result2"></span>円</p>

JavaScript

var price2 = $("#price2").html();　//string
price2 = price2 * 10; //number
price2 = String(price2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); //string
$("#result2").html(price2);

金額の計算をした後表示するときによく使います。
正規表現を使っているので、型に注意です！
上で書いたように、.html()で取得した値は文字列で取得します。
その後計算すると型は数値になります。
それからカンマ(コンマ)をつけるために正規表現を使うので型を文字列にしないといけません。
計算しなければ型を気にしなくていいですが、なんのために金額を取得するのか考えたらほとんど計算することになると思います。

3.金額表示に消費税を追加する

HTML

<p><span class="money" id="price3">1,000,000</span>円</p>
<p><span class="money2" id="result3"></span>円</p>

JavaScript

var price3 = $("#price3").html().replace(/,/g,"");
price3 = String(Math.round(price3 * 1.08)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
$("#result3").html(price3);

1と2を合わせて短くしただけですね。

4.makeshopの金額表示に数値に変更する

このまとめを書くきっかけになったmakeshop(メイクショップ)での話。
メイクショップで[PRICE]/[TAXPRICE]の独自タグを使うとその商品の、設定金額/税込金額を自動で表示してくれる独自タグがある。
それが厄介で金額だけなら使いやすいのだが、inputタグなど余計なものまでついてくる。(下のhtmlの<span class=”money”>内にあるもの)
ここから金額部分だけを抽出して計算するための金額取得方法。

HTML

<p><span class="money">¥100,200<input type="hidden" name="taxview">
    <script language="javascript">

      function numberFormat(num) {
        return num.toString().replace(/([\d]+?)(?=(?:\d{3})+$)/g, function (t) { return t + ','; });
      }

      function updateOptionPrice() {
        updateOptionPriceAjax(xxx, function (option_stock) {
          if (document.form1.price1) {
            document.form1.price1.value = numberFormat(option_stock.no_tax_price);
          }
          if (document.form1.price2) {
            document.form1.price2.value = numberFormat(option_stock.price);
          }
          if (document.form1.taxview) {
            document.form1.taxview.value = numberFormat(option_stock.tax);
          }
          if (document.getElementById("M_point") && option_stock.point >= 0) {
            document.getElementById("M_point").innerHTML = numberFormat(option_stock.point);
          }
          if (document.getElementById("gmo_point_value")) {
            document.getElementById("gmo_point_value").innerHTML = Math.floor(option_stock.price * 0.01);
          }
          if (option_stock.quantity == "0") {
            alert("該当商品のオプションは品切れです。他の商品を選択してください。");
            document.form1.spcode.focus();
          }
        });
      }
    </script>
    <input type="hidden" name="taxview" value="">
  </span>円</p>
<p><span class="money2"></span>円</p>

JavaScript

<script>
  var price4 = $("#price4").html();
  price4 = price4.substring(1, price4.indexOf("<input", 0));
  price4 = price4.replace(/,/g, "");
  $("#result4").html(price4);
</script>

今回は決まったパターンのhtmlだったので.substring()で
開始位置(￥マークを切るため、1)と
終了位置(<inputの出現位置を.indexOf()で取得)
を指定し切り取る方法を取っています。
見た目を変える必要はないのでその点では楽ですが、もう少しscriptタグの入れ方を考えてほしいですね！

情報が古い場合があるので、実際のコードを確認してください。