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

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

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

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

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

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

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

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
JS

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

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 р.
JS

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

<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);
	});
});
JS
10.07.2019 , обновлено 23.11.2019

Комментарии

, чтобы добавить комментарий.

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019 563
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации...
25.11.2017 15543
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
16.02.2018 12960
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
03.04.2019 3866
Список из 256 символов и их коды в ASCII.
26.11.2019 4002
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет...
05.12.2019 1986