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-maskUsing yarn:
yarn add make-maskUsing 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-678Type 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/1820Hour
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:22ZIP Code
mask('01310', '00000-000') // => 01310
mask('013109', '00000-000') // => 01310-9
mask('0131093', '00000-000') // => 01310-93
mask('01310930', '00000-000') // => 01310-930Money
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,32Telephone 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-2568CPF
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-90CNPJ
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-68IP 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.255We 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!