Loosely🌱

Smart input masks for regexes

Demo

Try it out! (powered by codesandbox.io)

Why?

You are probably already using regular expressions to validate user input. Leverage those existing patterns to help users format their input instead of showing them error messages.

How?

Loosely parses a regex into a graph. Each node in the graph has a set of characters that it accepts. Each time the user types a character, the graph is searched to see if the text represents a path through the graph. If a node only accepts one character, the search is allowed to insert that character into the input. This allows required parts of the mask to be inserted automatically while the user is typing. If no nodes accept a character, the search is allowed to remove it from the input. This allows a user's personal formatting preferences to be gracefully ignored. The result is a robust input experience that adapts to the data as it changes.

Install

npm install --save loosely

Use

Construct a Mask instance from a regular expression.

const { Mask } = require('loosely');
 
const mask = new Mask(/\d \(\d{3}\) \d{3}-\d{4}/);

DOM Watcher

Filter input as the user is typing into a DOM input.

const input = document.querySelector('#phone');
 
mask.watch(input);

Low Level API

filter(text) returns a string that at least partially matches the mask.

validate(text) determines if the text completely matches the mask.

sample() returns a random string that matches the mask.

const text = mask.filter('1-800-555-1234');
// 1 [phone]
 
mask.validate(text);
// true
 
mask.sample()
// 8 [phone]

Reverse Mask

Filter a regular expression from right to left.

const { ReverseMask } = require('loosely');
 
const mask = new ReverseMask(/(\d{1,3},)*\d{1,3}/);
 
const text = mask.filter('12345');
// 12,345

TODO

Assertions

Assertions are currently treated as normal groups. Any overlapping expressions before a look-behind or after a look-ahead will produce invalid results. Negative assertions are also treated as normal groups without negation, so they will always produce invalid results. Please consider contributing any ideas or code you have for this feature.