Сложение и форматирование цен в JS

10.07.2019

5782

Есть две переменные с форматированными ценами:

var a = '100.50 р.';
var b = '1 000 р.';

Нужно их сложить. Сразу привести их числу с помощью parseInt() или parseFloat() не получится т.к. помешают лишние символы и пробелы.

var a = '100.50 р.';
var b = '1 000 р.';

a = parseFloat(a); // 100
b = parseFloat(b); // 1

Поэтому нужно предварительно их удалить.

var a = '100.50 р.';
var b = '1 000 р.';

a = parseFloat(a.replace(/[^0-9.,]/gim, '')); // 100.5
b = parseFloat(b.replace(/[^0-9.,]/gim, '')); // 1000

Далее с числами можно работать и вывести отформатированный результат.

var a = '100.50 р.';
var b = '1 000 р.';

a = parseFloat(a.replace(/[^0-9.,]/gim, ''));
b = parseFloat(b.replace(/[^0-9.,]/gim, ''));

var sum = a + b;
sum = sum.toLocaleString() + ' р.'; // 1 100,5 р.

// Замена «,» на «.»
sum = sum.replace(',', '.'); // 1 100.5 р.

Пример в действии:

<div class="options_form">
	<ul>
		<li><label><input type="checkbox"> Опция 1<span>+10 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 2<span>+20 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 3<span>+10 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 4<span>+50 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 5<span>+10 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 6<span>+60 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 7<span>+10 р.</span></label></li>
		<li><label><input type="checkbox"> Опция 8<span>+100 р.</span></label></li>
	</ul>
	<div class="options_sum">Итого: <span>0</span></div>
</div>

HTML

$(document).ready(function(){
	$('.options_form input').click(function(){
		var sum = 0;
		$('.options_form input').each(function(){
			if ($(this).is(':checked')){
				sum = sum + parseFloat($(this).parent().find('span').text().replace(/[^0-9.,]/gim, ''));
			} 
			
		});
		sum = sum.toLocaleString() + ' р.';
		sum = sum.replace(',', '.');
		$('.options_sum span').html(sum);
	});
});