Make Mask
make-mask
is a lightweight javascript library of approximately 1kb for working with text masks. It was built to solve problems mainly in HTML inputs with javascript free from any other library. It was designed to solve inputs, but it is also valid when used to print texts in a simple and objective way. I guarantee a secure library covered with tests and open source!
It is very simple to use to create masks using the patterns below:
0
— Digits
Only numbers
9
— Optional digits
Indicates whether there will be a number or not
#
— Recursive digits
Use this pattern to create infinitely repeatable formulas
A
— Letters and numbers
Uppercase, lowercase letters and numbers
S
— Letters
Uppercase, lowercase letters
Installing
Using npm:
npm install make-mask
Using yarn:
yarn add make-mask
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/make-mask/dist/make.min.js"></script>
Using unpkg CDN:
<script src="https://unpkg.com/make-mask/dist/make.min.js"></script>
Usage
Default function arguments
It's very simple to use!
import mask from 'make-mask'
mask('12345678', '00000-000') // => 12345-678
Type information about the function
/**
* Returns the transformed value
* @param {string} value original value
* @param {string} mask syntax pattern
* @param {object} options options object
* @return {string} mask result
*/
fn(value, mask[ , options])
Most common examples
Date
mask('27101', '00/00/0000') // => 27/10/1
mask('271018', '00/00/0000') // => 27/10/18
mask('2710182', '00/00/0000') // => 27/10/182
mask('27101820', '00/00/0000') // => 27/10/1820
Hour
mask('203', '00:00:00') // => 20:3
mask('2039', '00:00:00') // => 20:39
mask('20392', '00:00:00') // => 20:39:2
mask('203922', '00:00:00') // => 20:39:22
ZIP Code
mask('01310', '00000-000') // => 01310
mask('013109', '00000-000') // => 01310-9
mask('0131093', '00000-000') // => 01310-93
mask('01310930', '00000-000') // => 01310-930
Money
const options = { reverse: true }
mask('6689', '#.##0,00', options) // => 66,89
mask('66899', '#.##0,00', options) // => 668,99
mask('668993', '#.##0,00', options) // => 6.689,93
mask('6689932', '#.##0,00', options) // => 66.899,32
Telephone with DDD
const m = '(00) 0000-0000'
mask('11994132', m) // => (11) 9413-2
mask('119941325', m) // => (11) 9413-25
mask('1199413256', m) // => (11) 9413-256
mask('11994132568', m) // => (11) 9413-2568
CPF
const options = { reverse: true }
const m = '000.000.000-00'
mask('6698', m, options) // => 66-98
mask('66980', m, options) // => 669-80
mask('669809', m, options) // => 6.698-09
mask('6698090', m, options) // => 66.980-90
CNPJ
const options = { reverse: true }
const m = '00.000.000/0000-00'
mask('0000', m, options) // => 00-00
mask('00001', m, options) // => 000-01
mask('000016', m, options) // => 0000-16
mask('0000168', m, options) // => 0/0001-68
IP Address
const m = '099.099.099.099'
mask('255255', m) // => 255.255
mask('25525525', m) // => 255.255.25
mask('2552552552', m) // => 255.255.255.2
mask('255255255255', m) // => 255.255.255.255
We recommended for you
Maybe when working with price values directly in inputs, this library is not suitable for your needs. And we recommend exploring the make-currency library!