Сложение и форматирование цен в 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 – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
6912
+10
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
22952
+13
Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
24304
+8
Поиск файлов в PHP
Для поиска файлов на сервере хорошо подходит функция glob(), которая возвращает список файлов по заданной маске, например...
1740
0
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
5732
+3
Таблица символов ASCII
Список из 256 символов и их коды в ASCII.
64117
+6