BLOG

ブログ

不まじめなことも書いています。

jQueryで税別金額を税込金額に置換してみる実験

2021.05.10

これを書いたのは下っ端です。

2021年の今年4月から税込価格表示が義務化されました。
総額表示への変更は既にされている方が大半だと思いますが、更新システム等が入っていないサイトでページ数が膨大なものになると大変な手間。

そこで!(総額表示義務化されてから1か月以上経過した今更ですが)
応急処置ながら、jQueryで「ページ内の金額を自動的に取得して10%をプラスした金額に差し替える」ことをやってみました。

実際に差し替えてみたサンプルはこちら
https://intercord.jp/test/test210510/

ソースコードを見て頂ければわかると思いますが、
HTML上では金額は「(税別)」という表記になっています。

(税別)から(税込)への変更は、下記部分です。

	var txt = $('div[class^="price"]').html();
	$('div[class^="price"]').html(
		txt.replace(/税別/g,'税込')
	);

簡単に説明すると、
↓ココで、divタグでclass設定が price から始まる中身(テキスト)を取得。

	var txt = $('div[class^="price"]').html();

↓ココで、divタグでclass設定が price から始まる中身(テキスト)にある 税別 の文字を 税込 に置換しています。

	$('div[class^="price"]').html(
		txt.replace(/税別/g,'税込')
	);
もし、税別 ではなく 税抜 という表記を 税込に変更したい場合は、下記のようになります。

	var txt = $('div[class^="price"]').html();
	$('div[class^="price"]').html(
		txt.replace(/税抜/g,'税込')
	);




そして、肝心な金額の取得や計算方法は、下記部分です。

    $('div[class^="price"]').each(function(){
        var text  = $(this).html();
        var hen = text.replace(/[0-9]/g,function(s){
            return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
        });
        var res_00 = hen.replace(/[^0-9]/g, '');
        var res_000 = res_00*1.0;
        var res_000_Calculation = res_000.toLocaleString();

        var hen_res_000_Calculation = res_000_Calculation.replace(/[0-9]/g,function(s){
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });

        var res_Calculation = res_00*1.1;
        var res_Calculation = res_Calculation.toLocaleString();

        var hen_res_Calculation = res_Calculation.replace(/[0-9]/g,function(s){
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });
        
        var h1Text =  text.replace(new RegExp(hen_res_000_Calculation,"g"),hen_res_Calculation);
        $(this).html(h1Text);
    });    
});

ざっくり説明すると、
1.)金額が記載されているHTMLのタグを指定
2.)1で指定した箇所から金額のみ取得
3.)金額を半角に変換、小数点を付与
4.)3の金額に1.1を掛ける
5.)4の金額を全角に変換
6.)金額が記載されているHTMLのタグ内で2の金額と5の金額を置換
という感じです。

今回は、サンプルで用意したHTMLが全角で金額が書かれている為、少し複雑ですね。

ちょっとしたご相談事などでもお気軽にお問い合わせください。

BLOGを見る