Форматирование чисел JavaScript при вводе запятыми не работает

Мне нужно разделить число запятыми, и я использовал блок кода из другого вопроса, который нашел здесь, но он не работает должным образом.

Вход

<input type="text" name="budget" placeholder="Total Budget" class="form-control">

JS

$('input[name=budget]').keyup(function (e) { 
    e.preventDefault();
    let value = $(this).val();
    let newValue = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    $(this).val(newValue);
});

Когда я тестировал этот код, я столкнулся с проблемой

Я набрал 1000, и он правильно показал 1000

Но когда я набрал еще один 0, число вернулось к этому 1 0000

И каждый 0, который я увеличиваю, добавляет запятую после этого 1,0,0,0,0,000

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

сначала нужно убрать запятые

let newValue = value.toString().replace(/,/g,"").replace(/\B(?=(\d{3})+(?!\d))/g, ",")

Есть нативное решение для форматирования чисел Международный ФорматЧисла

Я бы использовал это вместо замены regExp.

const numberFormatter = new Intl.NumberFormat();
const newValue = numberFormatter.format(value);

Да, намного лучше, чем решение RegEx. Также можно использовать Number.toLocaleString, который принимает символ страны и валюты. +1

Yogi 17.05.2022 16:43

Другие вопросы по теме