向长度不规则的字符串添加分隔符-Javascript

我正在研究自动填充连字符是HTML输入字段的不规则长度

After the 2nd digit/character
After the 6th digit/character
After the 13th digit/character
12-3456-7891234-00000

我已经想出了下面的代码，可以很好地添加连字符。然而，使用退格会破坏逻辑。我是否可以使用regex实现这一点，也许它会考虑整个字符串来处理拆分

var newFoo=''；
$（'.nzPhoneNumber'）.on（'change keydown paste input'，function（））{
var foo=$（this.val（）；
如果（foo.length==2）{
newFoo=foo.concat（'-'）
$（this）.val（newFoo）；
}else if（foo.length==7）{
newFoo=newFoo+foo.子串（3,7）+'-'
$（this）.val（newFoo）；
}else if（foo.length==15）{
newFoo=newFoo+foo.子串（8,15）+'-'
$（this）.val（newFoo）；
}
});
通常，创建输入格式在退格和选择字符串长度方面存在问题。您应该在事件中排除退格键，或者在字符串的目标长度中添加一个数字（这是因为防止在通过退格删除字符串时产生问题）

无论如何，我选择了第二个案例。所以我给你的目标长度加了一个。还使用了数组、循环和正则表达式来简化代码


$（'.nzPhoneNumber'）。打开（'change keydown paste input'，函数（e）{
var foo=$（this.val（）；
[3,8,16]。forEach（（项目）=>{
如果（foo.length==项目）
$（this.val（foo.replace（/（\d）（？=\d$）/，“$1-”））；
})
});
您可以使用与连续可选模式匹配的模式，并替换为自定义逻辑

代码如下：


const re=/^（\d{2}）（？：（\d{1,4}）（？：（\d{1,7}）（\d*））？）？$/；
$（'.nzPhoneNumber'）.on（'change keydown paste input'，function（））{
var foo=$（this.val（）；
$（this）.val（foo.replace（/\D/g.））.replace（re，（u2;，a，b，c，D）=>
a+
（b？`-${b}`:''）+
（c？`-${c}`:''）+
（d）`-${d}`:“”）；
});

使用单独的“输入值”和“显示值”。或者检查插入符号的位置（并在
.val（newval）
之后将其还原），以查看它是在破折号之后（在退格时）还是在破折号之前（在删除时）。您还可以在用户咒骂时移动插入符号（但不会修复backspace/del之前/之后的问题）。此外，还有大量“屏蔽输入框”jquery插件。不要再发明轮子了！那怎么办？嘿，伙计@WiktorStribiżew，这真是太棒了。我花了将近两个小时才明白你在那里做了什么！很好的学习曲线。“如果您能将其作为答案发布，我很乐意接受您的回答。”SubSul添加了一个解释和一个备选方案。这个解决方案不好。输入N个整数，将插入符号移到字符串的开头，然后开始插入新的整数。@Mohammad感谢您的回答，正如前面的评论所提到的，当编辑中间的字符时，逻辑会出现问题，我试图修复它，但无法解决。无论如何，谢谢，评论中提到的答案很好用。