Сложение и форматирование цен в 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, обновлено 29.01.2020

Комментарии

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

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

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
8847
+12
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
27398
+9
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
25557
+17
Список из 256 символов и их коды в ASCII.
117701
+13
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
8835
+5
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
9547
+1