JS/jQuery

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

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

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

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

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 июля 2019

Темы

jQuery JS Цены

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

После регистрации в системе эквайринга Сбербанка и получив доступ к тестовой среде, можно приступить к интеграции с...
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4,...
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...