13
12

More than 5 years have passed since last update.

文字列を取得、数字に変換して計算。計算した結果をカンマ区切りの文字にして戻す。

Last updated at Posted at 2014-06-16

string型 とか、Number型とかよくわからなかったので、いろいろとつまずいた部分。
もっとスマートな書き方がある気がするんですが、
とりあえず、よくある形で練習することにします。

サンプル

<div id = "container">
 <p>合計 1,000 人参加</p>
<div>

ここの1,000人を取り出して、500人足して表示させたいとき。

書き出したコード

var tt = $("div#container p").text();
var ta = tt.match(/\d/g);
var ts= ta.join("");
var tInt = parseInt(ts,10);
var t = tInt + 500;
var tNum = String(t).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
var html = $("div#goods_cart_return p").html("合計" + tNum + "人参加");

1行ずつみていく

var tt = $("div#container p").text();
div#container の子要素のpにあるテキスト『合計 1,000 人参加』を取得

var ta = tt.match(/\d/g);
数字を使いたいので、正規表現を使って数字部分だけ抜き出す。1,0,0,0

var ts= ta.join("");
1,0,0,0 このままだと数字がバラバラで使えないので、1000にしちゃう。

var tInt = parseInt(ts,10);
1000はまだ文字列のまま。これを計算で使えるように数字に変換します。

var t = tInt + 500;
これでようやく計算できるようになった!ここではたんに500をたしているだけ。

var tNum = String(t).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
計算した結果に3桁ごとにコンマをつけたいならば、replaceを使ってコンマをつけます。

var html = $("div#goods_cart_return p").html("合計" + tNum + "人参加");
あとはもどしてやるだけです。

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12