Добавить "сепартор" - визуальный разделитель в строку с большим числом

@ИмяПользователя · Регистрация: 02.04.2015

Студворк — интернет-сервис помощи студентам

Добрый день, на html-форме есть input type="text", в него пользователь должен ввести 7'ми-значное число, которое нужно отобразить в следующем виде: 111 22 33 (три цифры, пробел, две цифры, пробел, еще две цифры).
Причем разрешен ввод меньшего кол-ва цифр, но не допустить ввода "большего" кол-ва цифр в поле ввода...
Понимаю, что должно быть "просто", но не пойму "как", есть такая наколенка:

HTML5
1
<input type="text" name="numb" id="numb" size="10" onInput="formatDig(this.value);" />

JavaScript
1
2
3
function formatDig(inp){
   inp = inp.replace(/\D/g, '');
}

Это позволяет "отсеять" ввод любого другого символа, кроме цифр, дальше я думаю нужно как раз "разделить" их, но не пойму "как". Пробую так:

JavaScript
1
2
3
4
5
function formatDig(inp){
   inp = inp.replace(/\D/g, '');
   var numb = document.getElementById('numb');
   numb.value = numb.value.replace(/^({3}\d)({2}\d)({2}\d)/g, '$1 $2 $3');
}

Получаю ошибку Uncaught SyntaxError: Invalid regular expression: /^({3}\d)({2}\d)({2}\d)/: Nothing to repeat
Что тут "имелось ввиду": хотел "сделать" 3 "кармана" по 3 2 и 2 цифры, и заменить строку на первый карман + пробел + второй карман + пробел + третий карман...
Смутило Nothing to repeat - проверил вот так:

JavaScript
1
alert(numb.value);

Действительно - пусто... а где, тогда искать только что введеное мной значение, которое я уже вижу в окне браузера?! )
Научите, пож.! )

Добавлено через 1 час 24 минуты
Вынес проверку введеного символа "до" вызова функции, проверил алертом - введеное значение теперь есть, но всё так же ругается Uncaught SyntaxError: Invalid regular expression: /^({3}\d)({2}\d)({2}\d)/: Nothing to repeat at formatDig

HTML5
1
2
<input type="text" name="numb" id="numb" size="10" onInput="this.value = this.value.replace(/\D/g, ''); formatDig(this.value);" />
<script>

JavaScript
1
2
3
4
5
    function formatDig(inp){
       var numb = document.getElementById('numb');
       //~ alert(numb.value);
       numb.value = numb.value.replace(/^({3}\d)({2}\d)({2}\d)/g, '$1 $2 $3');
    }

HTML5
1
</script>

Как указать в регулярке, что символы могут быть, а могут не быть? Пробовал просто знак вопроса добавить ? - но тут, похоже, вообще "всё" игнорироваться начинает, делал так:

JavaScript
1
numb.value = numb.value.replace(/^({0,3?}\d)({0,2?}\d)({0,2?}\d)/g, '$1 $2 $3');

М.б. не туда запихнул знаки вопроса? Идея была "может быть 3 числа, а может не быть", но что-то пошло не так...

Добавлено через 18 минут
Гавно эти ваши регулярки - только время зря потерял, склепал на коленке такую поделку:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function formatDig(){
   var numb = document.getElementById('numb');
   numb.value = numb.value.split(' ').join('');
   if(numb.value.length > 3){
       var tmp = '';
       for(var i = 0; i < numb.value.length && i < 7 ; ++i){
           if(i == 3 || i == 5 || i == 7){
               tmp += ' ';
           }
           tmp += numb.value[i];
       }
       numb.value = tmp;
   }
}

Работает, зараза! ))))))

PS. А с регуляркой было бы хорошо разобраться, если кто-то мимо проходящий заметит явный бок и напишет как нужно было правильно реализовать эту задачу - буду весьма признателен! Удручает собственная темень и неспособность написать даже "простое" выражение по мануалу((

@diadiavova · 25.04.2018, 14:10

Сообщение от ИмяПользователя

Удручает собственная темень и неспособность написать даже "простое" выражение по мануалу((

Интересно, что это за мануал такой. То что ты хотел сделать вначале должно выглядеть так

JavaScript
1
console.log("1234567".replace(/(\d{3})(\d{2})(\d{2})/, "$1 $2 $3"))

Что касается варианта, что числа могут быть, а могут не быть - я не понял, что это значит, поэтому тут ничем помочь не могу.

@j2FunOnly · 25.04.2018, 15:19

Не по теме:

Сообщение от ИмяПользователя

Гавно эти ваши регулярки

У вас есть проблема. Вы решили использовать регулярные выражения чтобы её решить. Теперь у вас две проблемы.

:pardon:

@msheal · 25.04.2018, 16:40

Не по теме:

Полностью согласен с автором выше

@ИмяПользователя · 25.04.2018, 16:59 **[ТС]**

Сообщение от diadiavova

числа могут быть, а могут не быть

- Это значит, что пользователь может ввести только первые 3 цифры, тогда нужно будет сгруппировать выборку только по ним;
- Может ввести 2 группы цифр, тогда нужно будет сгруппировать по полям 1 и 2;
- может все 3 группы цифр, тогда, соответственно, в запросе получим ORDER 1, 2, 3 BY DESC

В момент ввода мы не знаем - сколько цифр захочет ввести пользователь, знаем только, что не меньше 3х (первое поле у меня всегда 3'х значное), второе и третье - ВСЕГДА двухзначные.

Откровенные ошибки ввода (выход за диапазон реальных значений) тут не рассматривается.

Делается "для быстрого поиска + для внутреннего использования".

Так вот, Ваш вариант вот в таком виде:

JavaScript
1
2
3
4
5
function formatDig(id){
   var numb = document.getElementById(id);
   numb.value = numb.value.split(' ').join('');
   numb.value = numb.value.replace(/(\d{3})(\d{2})(\d{2})/, "$1 $2 $3");
}

"Раздвигает" строку ввода лишь тогда, когда символов в строке становится 7+

Задачу для себя решил уже так, как написал выше (добавил только обработчика нажатия del и backspace), Вам за "науку" - спасибо! )))
В статье о регулярках перечислялись квантификаторы/спец.символы и прочая, видимо их там сгруппировали по мере частоты употребления/важности, а я этот порядок принял за очередность, в которой их нужно в саму регулярку тулить! ))

Еще раз спасибо, тема пока что закрыта... нужно будет как-нибудь еще попытаться что-то вот так... через /\^-?([!])/g решить)))

@Emilien · 25.04.2018, 22:16

В регулярках такое можно сделать используя {m,n}+ сверхжадные квантификаторы (\d{0,2}+)
Или (?> ) атомарную группировку (?>(\d{0,2})), но в Javascript это не поддерживается.
Атомарную группировку можно имитировать с помощью (?= ) позитивной опережающей проверки (?=(\d{0,2}))\1

JavaScript
1
2
3
   numb.value = numb.value.replace(/\D/g, '');
   numb.value = numb.value.replace(/^(?=(\d{0,3}))\1(?=(\d{0,2}))\2(?=(\d{0,2}))\3.*$/, "$1 $2 $3");
   numb.value = numb.value.replace(/ +$/, '');

@diadiavova · 25.04.2018, 23:20

Сообщение от ИмяПользователя

Ваш вариант вот в таком виде:

Там я просто исправил вариант с неправильно расставленными квантификаторами, о чем и написал.

Сообщение от ИмяПользователя

знаем только, что не меньше 3х (первое поле у меня всегда 3'х значное), второе и третье - ВСЕГДА двухзначные.

Если исправления выполняются по мере ввода, то каким должно быть исправление когда пользователь вводит четвертую цифру? В принципе, если надо вставлять пробел после третей и пятой цифр то можно так

JavaScript
1
2
3
4
5
6
7
8
        function formatDig(str)
        {
            return str.replace(/ /g, "").replace(/(\d{3})(\d{0,2})(\d{0,2})/, "$1 $2 $3").trim();
        }
 
        console.log(["1234567", "123456", "12345", "1234", "123"].map(formatDig));
 
// [ "123 45 67", "123 45 6", "123 45", "123 4", "123" ]

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@msheal
	25.04.2018, 16:40
	Не по теме: Полностью согласен с автором выше 0

Добавить "сепартор" - визуальный разделитель в строку с большим числом

Решение