Как я могу правильно отформатировать валюту с помощью jquery?

Мне не нужна маска, но мне нужно что-то, что будет форматировать валюту (во всех браузерах) и не позволит вводить какие-либо буквы или специальные символы. Спасибо за помощь

Пример:

Действительно: 50,00 долларов США
1 000,53 долларов США

Недействительно: $w45.00
$34,3r6


person ninjasense    schedule 18.02.2011    source источник
comment
Можете ли вы объяснить, почему другие не соответствовали вашим стандартам?   -  person Jeff    schedule 18.02.2011
comment
StackOverflow — моя поисковая система для подобных вопросов. Отзывы сообщества позволяют гораздо быстрее и точнее составить представление о том, какие инструменты и методы ценятся. Я говорю, продолжайте задавать такие вопросы.   -  person Feckmore    schedule 28.01.2013
comment
Попал сюда из Google.   -  person the-nick-wilson    schedule 24.12.2015
comment
Этот вопрос является лучшим результатом поиска Google для валюты формата jquery.   -  person Paul L    schedule 28.07.2016
comment
Отвечает ли это на ваш вопрос? Как отформатировать числа как строку валюты?   -  person Heretic Monkey    schedule 07.04.2020


Ответы (7)


ПЛАГИН JQUERY FORMATCURRENCY
http://code.google.com/p/jquery-formatcurrency/

person Robert Harvey    schedule 18.02.2011
comment
Жаль, что это несовместимо с последней версией jQuery. - person Patrick; 11.01.2014
comment
этот работает очень хорошо с jquery 2.0 plentz.github.io/jquery-maskmoney - person hal9000; 31.12.2014

Другой вариант (если вы используете представление бритвы ASP.Net): в вашем представлении вы можете сделать

<div>@String.Format("{0:C}", Model.total)</div>

Это отформатирует его правильно. примечание (item.total двойное/десятичное)

если в jQuery вы также можете использовать Regex

$(".totalSum").text('$' + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
person Melu    schedule 06.06.2013
comment
Я не голосовал против этого, но я не могу найти @String.Format ни в одном справочнике по HTML или jQuery. Я предполагаю, что это как-то связано с серверным HTML, созданным ASP.NET. Ссылался ли на это исходный вопрос? - person Nate; 03.12.2013
comment
Для тех, кто интересуется будущим, @String.Format — это бритвенный движок для ASP.NET || МВК - person Kyle; 14.01.2014
comment
Мне нравится регулярное выражение. Почему .toString() в конце? .replace возвращает строку. - person xr280xr; 16.09.2014
comment
Я тоже не минусовал это, но это заслуживает того, чтобы дать решение MVC Razor для вопроса, в котором не упоминались Razor, MVC или даже ASP.NET, и в ответе даже не было указано, что вот решение для MVC Бритва. - person Jonathan Wood; 26.09.2014
comment
Это отличный ответ, но как мне изменить регулярное выражение, чтобы получить число без десятичных знаков и без символа доллара? например, я хочу, чтобы 16000000 отображалось как 16 000 000 - person ministe2003; 28.01.2015
comment
Неважно, я сам ответил на свой вопрос: $(.totalSum).text('$' + parseFloat(value, 10).toFixed(0).replace(/(\d)(?=(?:[0) -9]{3})+\b)/gm, $1,).toString()); - person ministe2003; 28.01.2015
comment
А если я захочу заменить десятичный разделитель на «,», а остальные — на «.»? - person Deise Vicentin; 24.08.2015
comment
После поиска повсюду с предложениями плагинов и так далее, этот работал отлично! - person NoBullMan; 11.02.2019

Расширяя ответ Мелу, вы можете сделать это, чтобы функционализировать код и обрабатывать отрицательные суммы.

Вывод образца:
$5,23
-$5,23

function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
person Chad Kuehn    schedule 19.05.2014

Как следствие того, почему плагин jQuery FormatCurrency является хорошим ответом, я хотел бы опровергнуть ваш комментарий:

1. code.google.com/p/jquery-formatcurrency — не отфильтровывает все буквы. Вы можете ввести одну букву, и она не будет удалена.

Да, formatCurrency() сам по себе не отфильтровывает буквы:

// only formats currency
$(selector).formatCurrency();

Но toNumber(), включенный в плагин formatCurrency, работает.

Таким образом, вы хотите сделать:

// removes invalid characters, then formats currency
$(selector).toNumber().formatCurrency();
person Neptune Systems    schedule 12.03.2012

Используйте jquery.inputmask 3.x. См. демонстрации здесь

Включить файлы:

<script src="/assets/jquery.inputmask.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.extensions.js" type="text/javascript"></script>
<script src="/assets/jquery.inputmask.numeric.extensions.js" type="text/javascript"></script>

И код как

$(selector).inputmask('decimal',
  { 'alias': 'numeric',
    'groupSeparator': '.',
    'autoGroup': true,
    'digits': 2,
    'radixPoint': ",",
    'digitsOptional': false,
    'allowMinus': false,
    'prefix': '$ ',
    'placeholder': '0'
  }
);

Особенности:

  • легко использовать
  • дополнительные части в маске
  • возможность определять псевдонимы, которые скрывают сложность
  • Маски даты/даты/времени
  • числовые маски
  • много обратных вызовов
  • нежадные маски
  • многие функции могут быть включены/отключены/настроены с помощью опций
  • поддерживает атрибуты readonly/disabled/dir="rtl"
  • поддержка атрибута(ов) data-inputmask
  • поддержка нескольких масок
  • поддержка масок регулярных выражений
  • поддержка динамической маски
  • поддержка маски предварительной обработки
  • форматирование/проверка значения без элемента ввода
person Fernando Kosh    schedule 18.07.2014
comment
после загрузки ZIP (из Интернета) я обнаружил, что файл *.js внутри ZIP имеет другое соглашение об именах файлов. я немного запуталась.... - person gumuruh; 02.07.2017
comment
@gumuruh Загляните в dist/ папку ZIP-файла. ZIP-файлы в корне извлеченной папки являются пакетными и не предназначены для использования. Внимание на расширения. Загружайте только то, что вам нужно. - person Fernando Kosh; 11.02.2018
comment
@FernandoKosh @drew010 Можно ли использовать это для нескольких элементов на странице? Например: $('.price-format').inputmaks() или $('.price-format').each(function() { $(this).inputmask() }) - person remkovdm; 04.08.2020
comment
@remkovdm Прошло много времени с тех пор, как я реализовал это сейчас, но да, я считаю, что это было хорошо. Документы и примеры показывают $(селектор), что означает, что это может быть селектор CSS, как и любой другой селектор jQuery. Так что $('.price-format').inputmask('decimal', { ... }); должно работать. - person drew010; 13.08.2020

Раньше я использовал плагин валюты формата jquery, но в последнее время он сильно глючил. Мне нужно форматирование только для USD/CAD, поэтому я написал собственное автоматическое форматирование.

$(".currencyMask").change(function () {
            if (!$.isNumeric($(this).val()))
                $(this).val('0').trigger('change');

            $(this).val(parseFloat($(this).val(), 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
        });

Просто установите класс любого ввода, который должен быть отформатирован как валюта <input type="text" class="currencyMask" />, и он отлично отформатирует его в любом браузере.

person Greg Snider    schedule 01.06.2016

Попробуйте валюту регулярного выражения с jQuery (без плагина):

$(document).ready(function(){
  $('#test').click(function() {
    TESTCURRENCY = $('#value').val().toString().match(/(?=[\s\d])(?:\s\.|\d+(?:[.]\d+)*)/gmi);
    if (TESTCURRENCY.length <= 1) {
      $('#valueshow').val(
        parseFloat(TESTCURRENCY.toString().match(/^\d+(?:\.\d{0,2})?/))
      );
    } else {
      $('#valueshow').val('Invalid a value!');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="12345.67890" id="value">
<input type="button" id="test" value="CLICK">
<input type="text" value="" id="valueshow">

Изменить: новая проверка значения на действительное/недействительное

person KingRider    schedule 28.12.2015
comment
В чем проблема минусовать? Этот вопрос (пожалуйста, прочитайте meta.stackoverflow.com/questions/251758/ спасибо) - person KingRider; 28.03.2017