JavaScript高级(四)
一、正则表达式
1.它有什么作用?
1、匹配字符,如昵称只可以输入中文
2、替换字符,如过滤敏感词
3、提取字符,如搜索时输入“手机”会出现“手机壳”,“手机充电器”等
实际开发中,一般都是直接复制已经写好的正则表达式,因为不太好写
2.创建正则表达式
正则表达式创建时不要加引号,不管是数字型还是字符串型
(1)利用RegExp对象来创建
let regexp = new RegExp(/123/);
console.log(regexp);
console.log('/123/');
(2)利用字面量创建
let regexp = /123/;
console.log(regexp );
3.测试正则表达式
使用test()
方法来测试字符串是否符合正则表达式
var regexp = /123/; //是否包含123
console.log(regexp.test(123)); //true
console.log(regexp.test('123')); //true
console.log(regexp.test(1234567)); //true
console.log(regexp.test(12)); //false
console.log(regexp.test('abc')); //false
二、特殊字符
可以参考:MDN正则表达式
^ | 以。。。开头 |
---|---|
$ | 以。。。结尾 |
$ | 以。。。结尾 |
1.^和$匹配开头和结尾
普通情况:/abc/
,只要包含abc返回的都是true
var reg = /abc/; //只要包含abc返回的都是true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd'));//true
console.log(reg.test('aabcd'));//true
/^abc/
必须以abc开头才为true:
var reg = /^abc/; //必须以abc开头才为true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //true
console.log(reg.test('aabcd')); //false
/^abc$/
精确匹配,必须是abc这三个字符才为true
var reg = /^abc$/; //精确匹配,必须是abc才为true
console.log(reg.test('abc')); //true
console.log(reg.test('abcd')); //false
console.log(reg.test('aabcd')); //false
console.log(reg.test('abcabc')); //false
2.[ ]字符类
[ ]
表示有一系列字符可供选择,只要匹配其中一个就可以
/[abc]/
,只要包含abc其中一个字符,就true
var reg = /[abc]/; //只要包含abc其中一个字符,就true
console.log(reg.test('andy'));//true
console.log(reg.test('baby'));//true
console.log(reg.test('color'));//true
console.log(reg.test('dj'));//false
/^[abc]$/
精确匹配,必须是a或者b或者c其中一个才为true
var reg = /^[abc]$/; //精确匹配,必须是a或者b或者c其中一个才为true
console.log(reg.test('aa')); //false
console.log(reg.test('a')); //true
console.log(reg.test('b')); //true
console.log(reg.test('c')); //true
console.log(reg.test('abc')); //false
/^[a-z]$/
精确匹配,必须是26个英文字母其中一个才为true,-
可以作为范围限定
var reg = /^[a-z]$/; //精确匹配,必须26个英文字母其中一个才为true
console.log(reg.test('ss')); //false
console.log(reg.test('a')); //true
console.log(reg.test('f')); //true
console.log(reg.test('aafasd')); //false
console.log(reg.test('A')); //false
console.log(reg.test('1')); //false
/^[a-zA-Z0-9_-]$/
精确匹配,大小写字母,0-9数字,还有后面的字符,只要是其中一个就为true,其中一个噢
var reg = /^[a-zA-Z0-9_-]$/;
//精确匹配,大小写字母,0-9数字,还有后面的字符,只要是其中一个就为true
console.log(reg.test(7)); //true
console.log(reg.test('F')); //true
console.log(reg.test('t')); //true
console.log(reg.test('-')); //true
console.log(reg.test('34234')); //false
console.log(reg.test('@')); //false
/^[^a-zA-Z0-9_-]$/
如果[]里面的内容前面加了^
,那么意思是取反,精确匹配,除了大小写字母,0-9数字,还有后面的字符,其他的其中一个就为true,
var reg = /^[^a-zA-Z0-9_-]$/;
//如果[]里面的内容前面加了`^`,那么意思是取反
//精确匹配,除了大小写字母,0-9数字,还有后面的字符,其他的其中一个就为true,
console.log(reg.test(7)); //false
console.log(reg.test('F')); //false
console.log(reg.test('t')); //false
console.log(reg.test('-')); //false
console.log(reg.test('34234')); //这个依然是false,因为不是其中一个
console.log(reg.test('@')); //true
3.量词符
设定某个模式出现的次数
/^a*$/
出现>=0个a为true
/^a+$/
出现>=1个a为true
/^a?$/
出现0或1个a为true
var reg = /^a*$/; //出现>=0个a为true
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //true
var reg = /^a+$/; //出现>=1个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //true
var reg = /^a?$/; //出现1或0个a为true
console.log(reg.test('')); //true
console.log(reg.test('a')); //true
console.log(reg.test('aaaa')); //false
/^a{3}$/
出现3个a为true
/^a{3,}$/
出现>=3个a为true
/^a{3,6}$/
出现3~6个a为true
中间不要有空格
var reg = /^a{3}$/; //出现3个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //false
console.log(reg.test('aaa')); //true
var reg = /^a{3,}$/; //出现>=3个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //true
console.log(reg.test('aaa')); //true
var reg = /^a{3,6}$/; //出现3~6个a为true
console.log(reg.test('')); //false
console.log(reg.test('a')); //false
console.log(reg.test('aaaa')); //true
console.log(reg.test('aaa')); //true
console.log(reg.test('aaaaaaaaaa')); //false
设定某个模式出现的次数
/^[a-zA-Z0-9_-]{6,16}$/
,在这些东西里面,出现其中的6~16个为true
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
//在这些东西里面,出现其中的6~16个为true
console.log(reg.test('zzy_008'));//true
console.log(reg.test('zzy-007'));//true
console.log(reg.test('zzy!007'));//false
三、用户名表单验证
这个比较简单,就不解释了
<input type="text"> <span>请输入用户名</span>
<script>
let input = document.querySelector('input');
let span = document.querySelector('span');
let reg = /^[a-zA-Z0-9_-]{6,16}$/;
input.onblur = function() {
let result = reg.test(input.value);
if(result) {
span.className = 'right';
span.innerHTML = '用户名格式正确!'
}else {
span.className = 'wrong';
span.innerHTML = '用户名格式错误!'
}
}
</script>
四、括号总结
中括号:字符集合,匹配方括号中的任意字符
var reg = /^[a-zA-Z0-9_-]$/;
大括号:量词符,里面表示重复的次数或范围
var reg = /^abc{3}$/; 只有abccc返回true
var reg = /^[a-zA-Z0-9_-]{3,7}$/;
小括号:表示优先级
var reg = /^(abc){3}$/; 只有abcabcabc返回true
在线测试工具:https://c.runoob.com/front-end/854/
五、预定义类
预定义类就是某些常见模式的语法糖罢了
案例:座机号码验证:010-12345678或0530-1234567
正则中的或用 | 来表示,不能有空格。
有^$
时,[0-9]
是多选一,长度为3,没有^$
就是只要是数字就行,就没有长度限制了
//座机号码验证:010-12345678或0530-1234567
//正则中的或用 | 来表示,不能有空格
let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
//let reg = /^[0-9]{3}-[0-9]{8}|[0-9]{4}-[0-9]{7}$/;
console.log(reg.test('010-123456')); //false
console.log(reg.test('0230-12345678')); //false
console.log(reg.test('0510-1234567')); //true
六、正则替换
replace()
可以实现字符串替换操作,替换的参数可以是字符串或正则表达式。
但是它有多种玩法,第一个参数可以是字符串或正则表达式;第一个参数如果不写g或gi的话,就只替换第一个,写了就全部替换成第二个参数,第二个参数可以是字符串,也可以是个函数。
let str = 'zzy和dj和dj和djj';
let newStr1 = str.replace('dj', 'beat');//zzy和beat和dj和djj
let newStr2 = str.replace(/dj/g, 'M'); //zzy和M和M和Mj
let newStr3 = str.replace(/[dj]/g, item => `${item}o`); //zzy和dojo和dojo和dojojo
console.log(newStr1,newStr2);
替换正则表达式:
正则表达式参数可以加修饰符:/表达式/g
g(global)
:全局匹配
i(ignore)
:忽略大小写
gi
:全局匹配+忽略大小写
<textarea id="msg"></textarea><button>提交</button>
<div></div>
<script>
let msg = document.querySelector('#msg');
let btn = document.querySelector('button');
let div = document.querySelector('div');
btn.onclick = function () {
//正则表达式参数可以加修饰符
// g:全局匹配,i:忽略大小写,gi:全局匹配+忽略大小写
div.innerHTML = msg.value.replace(/我靠|我去/gi, '我*');
}
</script>
js高级到这里就结束了,学习前端半年了,感谢pink老师,不过老师的课可能讲的还是浅了些,后面我会再去搜寻更好的课程,慢慢往里面补充,加油!!