将正则表达式转换为掩码输入 - Javascript答案

【问题标题】：Convert Regular expression to mask-input - Javascript将正则表达式转换为掩码输入 - Javascript
【发布时间】：2017-08-20 20:07:32
【问题描述】：

我正在尝试将正则表达式格式转换为掩码输入字符串，以引导用户在 UI 上输入正确的输入。数字用“#”表示，字母用“A”表示。

基本上，

      "^\d{3}$"                        -->    "###"
      "^(GB)\d{3}$"                    -->    "GB###"
      "^\d{2}\.\d{3}\/\d{4}-\d{2}$"    -->    "##.###/####-##"
      "^\d{2}[ ]\d{3}[ ]\d{3}$"        -->    "## ### ###"

函数 convertToMaskInput(正则表达式){

}

convertToMaskInput("^\d{4}$");
//Output: "####"

我是 Javascript 的初学者，我很难动态地做到这一点。任何帮助或指导表示赞赏。

提前致谢！

【问题讨论】：

这是一项艰巨的任务，尤其是对于初学者而言。你最好使用digitalbush.com/projects/masked-input-plugin之类的库
没有实用的编码解决方案可以涵盖所有正则表达式。如果你有一小组相同的，你可以手动完成。否则，您将不得不做出很多假设。许多正则表达式匹配无数种可能性 - 使这个问题本质上难以解决。
如果你有一个已知的输入格式你正在测试（转换？），这样做没有问题。 /^\d{3}$/ --> "###" /^(GB)\d{3}$/ --> "GB###" /^\d{2}\.\d{3}\/\d{4}-\d{2}$/ --> "##.###/####-##" /^\d{2}[ ]\d{3}[ ]\d{3}$/ -- > "## ### ###"
我猜他想从给定的正则表达式生成格式，就像一些 MaskedInput-components 能够做的那样。

标签： javascript regex parsing

【解决方案1】：

如果您的目标是处理正则表达式的所有可能变体，您可能应该使用现有插件而不是滚动您自己的解决方案。

但是，为了完整起见，这里有一个可以处理您作为示例提供的案例子集的实现：

function convertToMaskInput(regex) {
  return new RegExp(regex).source
    .replace(/^\^|\$$/g, '')
    .replace(/\\d/g, '#')
    .replace(/\(([^)]*)\)|\[([^^])\]|\\([\\/.(){}[\]])/g, '$1$2$3')
    .replace(/([\w#.-])\{(\d+)\}/gi, function (_, c, n) {
        return Array(+n + 1).join(c)
    })
}

convertToMaskInput("^\d{4}$")

console.log([
  /^\d{3}$/, //=> "###"
  /^(GB)\d{3}$/, //=> "GB###"
  /^\d{2}\.\d{3}\/\d{4}-\d{2}$/, //=> "##.###/####-##"
  /^\d{2}[ ]\d{3}[ ]\d{3}$/ //=> "## ### ###" 
].map(convertToMaskInput))

【讨论】：

感谢您的回复。你介意解释一下第三和第四个替换语句吗？
第三个替换语句将匹配组(...) 替换为其内容，并删除单字符字符集周围的括号，以及正则表达式中的\\( 和\\[ 等非转义文字。第四个替换语句用于重复字符后跟匹配范围（#{4} 变为 ####）。