简介
ts-mask 是一个 TypeScript 编写的用于对输入内容进行格式化的包。它可以根据特定的规则对输入的内容进行过滤和修正，以达到格式化的目的。该包支持多种规则，适用于不同的场景。
安装
在终端中输入以下命令即可安装 ts-mask，前提是需要已经安装了 Node.js 和 npm：
npm install ts-mask
同时，你还需要在你的项目中引入该包。可以使用以下方式进行引用：
import tsMask from 'ts-mask';
如果你的项目中没有使用 TypeScript，则需要先安装 typescript：
npm install typescript
为了正确使用 ts-mask，你还需要安装 tsconfig.json 文件：
npx tsc --init
这将创建一个 tsconfig.json 文件，该文件用于配置 TypeScript 编译器的设置。
使用
ts-mask 包提供了一个 Mask 类来处理输入内容。你可以创建一个 Mask 类的实例并对其进行配置，以便正确地格式化输入内容。
以下是一个简单的示例，它在输入框中限制了密码只能包含字母数字和下划线：
-- -------------------- ---- ------- ------ ------- - ---- - ---- ---------- ----- ------------ - --- ------ -------- ------------------ --- ------------------------------------------------------------------- ------- -- - ----- ----- - ------------ -- ----------------- ----- ----- - ------------ ----- ------------- - --------------------------- ----------- - -------------- ---
在这个例子中，我们首先使用 import 引入了 ts-mask 包，并从中导入了 Mask 类。然后我们创建了一个新的 Mask 类实例来处理密码输入框。我们设置了一个正则表达式，该正则表达式将筛选掉不符合要求的字符。
随后我们为密码输入框添加了一个 input 事件监听器。每当用户在密码输入框中输入内容时，我们将当前输入的值传递到 passwordMask.filter() 方法中进行过滤。过滤后的结果就是符合要求的密码，我们将其设置为输入框的值。
主要功能
pattern
该属性可以为 Mask 类对象设置一个匹配规则，对匹配结果进行过滤。
const phoneMask = new Mask({
pattern: /^1[3456789]\d{9}$/,
});在上面的示例中，我们为 phoneMask 对象设置了一个正则表达式作为 pattern 属性的值。这个正则表达式将筛选掉不符合手机号码规则的字符。
invalidChar
该属性可以为 Mask 类对象设置要筛选的无效字符。这些字符会被滤除，除非它们出现在 pattern 属性的正则表达式中。
const passwordMask = new Mask({
pattern: /^[a-zA-Z0-9_]*$/,
invalidChar: ['<', '>', '&', '"', "'"],
});在上面的示例中，我们为 passwordMask 对象设置了一个无效字符数组，这个数组中的字符将会被滤除。
startToEnd
该属性可以为 Mask 类对象设置一个布尔值，用于控制是否从开头开始过滤，还是从输入字符串的任意位置开始过滤。
const nameMask = new Mask({
pattern: /^([A-Za-z]+)\s?([A-Za-z]*)$/,
startToEnd: true,
});在上面的示例中，我们为 nameMask 对象设置了 startToEnd 属性的值为 true，这意味着 nameMask 会从匹配结果的开头进行过滤。
inputFormat
该属性可以为 Mask 类对象设置一个用于输入格式化的模板。
const dateMask = new Mask({
pattern: /^(\d{1,2})(\/)(\d{1,2})(\/)(\d{4})$/,
inputFormat: 'MM/DD/YYYY',
});在上面的示例中，我们为 dateMask 对象设置了 inputFormat 属性的值，这个值是一个用于日期格式化的模板字符串。次模板字符串为 MM/DD/YYYY，这意味着当用户输入日期时，该模板将会格式化为 MM/DD/YYYY。
outputFormat
该属性可以为 Mask 类对象设置一个用于输出格式化的模板。
const phoneMask = new Mask({
pattern: /^1[3456789]\d{9}$/,
outputFormat: '($1) $2-$3',
});在上面的示例中，我们为 phoneMask 对象设置了 outputFormat 属性的值，这个值是一个用于电话格式化的模板字符串。此模板字符串使用了三个带变量的值（$1, $2, $3），它们会在电话号码匹配时被替换。
onInvalid
该属性可以为 Mask 类对象设置一个在输入无效字符时触发的回调函数。
const passwordMask = new Mask({
pattern: /^[a-zA-Z0-9_]*$/,
invalidChar: ['<', '>', '&', '"', "'"],
onInvalid: (invalidChar) => {
console.warn(`Invalid character ${invalidChar} entered into password field.`);
},
});在上面的示例中，我们为 passwordMask 对象设置了 onInvalid 属性的值，这个值是一个回调函数。每当无效字符被输入到passwordMask 中时，该函数都会被调用，并把无效字符的值传递给它。
结论
本文介绍了 npm 包 ts-mask 的使用教程，并给出了详细的代码示例。我们学习了如何使用 ts-mask 对输入内容进行格式化，以达到规范化输出的目的。本文还讨论了 ts-mask 的各种属性和功能，让你可以更好地利用它来定制化你的输入框。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de284