js 正则匹配连续的字符，一般用于密码输入框（禁止输入连续的字母或者数字等）

相信广大网友可能碰见过这样的一些网站，就是设置密码的时候， 如果我们设置连续的字母或者数字，会提示我们的密码比较简单 不让设置，特别是一些支付密码，如果你设置六位连续的数字， 比如： 111111， 66666，888888等。是不是很容易破解呢

对我们前端来说，在用户输入完成之后，就需要进行判断用户输入的是否满足条件，首先你可以不通过正则匹配判断用户输入是否满足条件 比如

const test = document.querySelector('#test')
test.onblur = function() {
    if(test.value.length === 6) {
        let isRepeat = test.value.split('').every(item => item == test.value.charAt(0))
        if(isRepeat)  alert('密码不能是连续的字符')
    }
}
1
2
3
4
5
6
7

不过这样看起来 是不是太low。 哈哈哈🤔

相信很多童鞋肯定喜欢正则匹配了，那么联系的字符要怎么写呢？ 是不是很懵逼，其实我刚接到这个需求也是很懵逼，有点小压力，但是对于程序员来说有压力表示这个东西稍微有点挑战力，啥都没压力的工作 说明了 你现在很危险了。 这里在吐槽一次 前端更新太快 还得坚持每日学习 ！！！！

正则

在讲解之前 相信大家对正则中的捕获括号 比较熟悉吧，什么不懂！！ 说的有点官方了，我举个例子就知道了

正则中。（x） 匹配字符串中一一串字串 的格式。这个括号就叫做捕获括号

let str = "yunchong blog"
let reg = /(yunchong)/g
console.log(str.match(reg))
1
2
3

毫无疑问就是。上面会输出一个 [“yunchong”]

但是延伸一下。如果后面还跟着一个yunchong呢
比如

let str = "yunchongyunchong blog"
let reg = /(yunchong)/g
console.log(str.match(reg))
1
2
3

这下输出什么呢 因为我后面有个全局匹配 那么输出的结果是
[“yunchong”, “yunchong”]
但这个不能 好像是匹配到了两次。 🤔

问题是你不能保证这两个是否连续的？

我还可以这样写

let str = "yunchong blog yunchong"
1

输出的和我上面的是一样

就差那么一点点 是不是很气人？

有的童鞋可能会说，我们为啥不能把第一次匹配到的结果跟在后面再匹配一下

还别说 js 正则中还真有这个模式

在js正则中 /(x)\1/ 后面的\1 表示第一个被捕获括号匹配到的子字符串

既然有第一个那么就有第二个
比如。/(x)(y)\1\2/ 这个\2 就是相当于 第二个被捕获括号匹配的子字符串

其实说那么多 还不如拉出来练习练习

其实很多童鞋就想到了，这下我们就可以用这个方式处理我们上面的那个问题

let str = "yunchongyunchong blog"
let reg = /(yunchong)\1/g
console.log(str.match(reg))
1
2
3

是不是 就是我们想要的结果了，两个连续的yunchong 被匹配到了

1. 思考拓展
   如果我们后面有很多怎么办
   比如：

let str = "yunchongyunchongyunchongyunchongyunchongyunchong blog"
1

这个其实也简单
比如我们要匹配连续的三次
那么. 在后面{2} 就相当于把\1 重复匹配两次即可，注意最前面的那个括号可是算一次哦

let reg = /(yunchong)\1{2}/g
console.log(str.match(reg))
1
2

2. 还有的网友可能问了 如果我中间有空格怎么办，匹配一个复杂连续的怎么办。（我想说你真是个人才会想问题）

不过既然提出来，咱就想办法处理呗

举个小例子

let str = "yun chong yun chong"
1

我让你匹配 yun chong 这两个连续的输出结果要求是
[“yun chong yun chong”] 能做到吗
这个时候有的童鞋可能又会犯浑了，空格怎么办呢。哈哈哈

算了博主直接说出答案了 因为一会就要上班了 不能再摸鱼写博客了

let str = "yun chong yun chong"
let reg = /(yun) (chong) \1 \2/g
console.log(str.match(reg))
1
2
3

其实吧 这个更简单。中间加上空格就行了。哈哈哈哈

说到这里 你这个垃圾博主，好像标题的问题 怎么禁止输入连续的字母这个问题还没说呢～ hahah

好像什么都没说，又好像什么都说了！ 至于怎么处理业务逻辑问题，交给广大网友自己处理了！！

关注我， 一个又菜又想分享的菜鸟前端博主！！！