Шаблоны

Шаблон — строка, в которой специальные символы означают «сюда вводится…», а всё остальное выводится как есть.

Синтаксис

Символ	Значение
9	Цифра
a	Буква любого алфавита
*	Буква или цифра
[ ... ]	Необязательная часть: заполняется целиком или не заполняется
\	Следующий символ — как есть: \9 выведет девятку
любой другой	Выводится как есть: скобки, пробелы, дефисы, +7

mask('12345678', '(999) 999-99'); // '(123) 456-78'
mask('ab12', 'aa-99');            // 'ab-12'
mask('1230', '99:99[:99]');       // '12:30' — seconds are optional
mask('12', '\\9-99');             // '9-12'

Как обрабатывается ввод

• Символы, которые не подходят к позиции, пропускаются: mask('a1b2', '99') → '12'.
• Литералы после последнего введённого символа не дописываются — пользователь видит (123, а не (123) .
• Литералы во вводе совпадают с литералами шаблона, поэтому форматирование уже отформатированного значения ничего не меняет.
• Лишние символы отбрасываются.

Свои токены

Токен — регулярное выражение для одного символа и, по желанию, преобразование:

const serial = createMask({
  pattern: 'HH-HH-HH',
  tokens: { H: { pattern: /[0-9a-f]/i, transform: 'upper' } },
});

mask('a1b2c3', serial); // 'A1-B2-C3'

transform — 'upper', 'lower' или функция (char) => string.

Несколько шаблонов

Массив шаблонов: выбирается первый, в который ввод помещается целиком. Перечисляйте от короткого к длинному:

const code = createMask(['999-999', '9999-9999']);

mask('123456', code);   // '123-456'
mask('12345678', code); // '1234-5678'

Шаблон-функция

Когда шаблон зависит от введённого — например, от первых цифр номера карты:

const cardMask = createMask({
  pattern: (input) => (/^3[47]/.test(input) ? '9999 999999 99999' : '9999 9999 9999 9999'),
});

Код страны в начале шаблона

Если шаблон начинается с литералов, похожих на ввод (+375, +998), они считаются введёнными, только когда ввод начинается с + или цифр больше, чем вмещает шаблон (вставили номер с кодом). Иначе первая цифра номера не «съедается» кодом страны: mask('331234567', phone('by')) → +375 (33) 123-45-67.

См. также

• createMask — все опции
• Готовые маски