前提:正则表达式的含义及作用
正则表达式:用来匹配字符串中字符组合的模式
正则表达式常用来检索、替换那些符合某个规则的文本(规范书写格式)
一.正则表达式在js中的使用
注意:
正则表达式的基本语法是://
这个和我们的注释表达相同,因此在使用正则表达式时内容不能为空,否则会被认为是注释
1:利用 RegExp 对象来创建
创建对象的使用需要实例化对象
var RegExp = new RegExp(/123/);
console.log(RegExp);
2:利用字面量创建
var 变量 = 正则表达式
var zz = /abc/;
3.test()正则对象方法
使用test()来检测字符串是否符合要求
语法:正则表达式(名).test(需要检测的内容)
console.log(zz.test(123));
console.log(zz.test('123'));
console.log(zz.test('abc'));
console.log(zz.test('abcde'));
在test()检测中,只要我们检测的内容文本类型和我们输入的正则表达式内容相同,并且包含内容输入的正则表达式内容,就会返回true
注意:在正则表达式中不需要添加引号,无论我们输入的内容是数字型的还是字符串型的
特殊点:对于内容为数字的情况,数字型的和字符串型的是一样的,所以无论是哪一种,他都会返回true
二、边界符
1、^ 以谁开头
以var reg = /^abc/;为例:
这个表示,只有以abc开头的,test()检测结果返回的才是true
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('-------------------');
2、 $ 以谁结尾
以var reg1 = /^abc$/;为例:
这个表示,只有以abc开头并以abc结尾的,test()检测结果返回的才是true
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
实际上二者双管齐下,使得最终结果只能是我们正则表达式的内容,test()检测结果才会返回 true
三、字符类
1.[]
表示有一系列的字符可供选择,只要匹配上其中的一个就可以了
var rg = /[abc]/; // 只要有其中一个或多个返回值都是 true
console.log(rg.test('aa'));
console.log(rg.test('andy'));
console.log(rg.test('baby'));
console.log(rg.test('copy'));
console.log(rg.test('end'));
2.^[]$
var rg1 = /^[abc]$/; // 要求三选一,检测内容只有只存在这其中的一个元素才是true
console.log(rg1.test('aa'));
console.log(rg1.test('baby'));
console.log(rg1.test('andy'));
console.log(rg1.test('a')); // true
console.log(rg1.test('b')); // true
console.log(rg1.test('c')); // true
console.log(rg1.test('abc'));
3.^[范围]$
var reg = /^[a-z]$/; // 要求多选一(26个字母),检测内容只有只存在这其中的一个元素才是true
console.log(reg.test('a')); // true
console.log(reg.test('b')); // true
console.log(reg.test('c')); // true
console.log(reg.test('z')); // true
console.log(reg.test(1)); // false
4.组合形式 依旧是多选一
var reg1 = /^[a-zA-Z0-9_-]$/;
console.log(reg1.test('a')); // true
console.log(reg1.test('z')); // true
console.log(reg1.test('A')); // true
console.log(reg1.test('Z')); // true
console.log(reg1.test('6')); // true
console.log(reg1.test('-')); // true
console.log(reg1.test('_')); // true
console.log(reg1.test('!')); // false
注意:
如果中括号里面有 ^ 表示取反 就是表示和没加这个取反符号之前的所有结论相悖
不同点:
这个同我们边界符的 ^ 意义是完全不一样的;边界符的 ^ 表示的是从谁开始
var reg1 = /^[a-zA-Z0-9_-]$/;
console.log(reg1.test('a')); // false
console.log(reg1.test('z')); // false
console.log(reg1.test('A')); // false
console.log(reg1.test('Z')); // false
console.log(reg1.test('6')); // false
console.log(reg1.test('-')); // false
console.log(reg1.test('_')); // false
console.log(reg1.test('!')); // true
四、量词
量词符:用来设定某个模式出现的次数,本质上就是规定字符可以重复的次数
以 var reg = /^a$/; 为例:(具体代码如下)
<script>
// 1. * 相当于 >=0 可以出现0次或多次,就是有没有都不影响,它一直是true
// var reg = /^a*$/;
// console.log(reg.test(''));
// console.log(reg.test('a'));
// console.log(reg.test('aaaa'));
// 2. + 相当于 >=1 可以出现1次或多次
// var reg = /^a+$/;
// console.log(reg.test('')); // false
// console.log(reg.test('a')); // true
// console.log(reg.test('aaaa')); // true
// 3. ? 相当于 1||0 只出现1次或没有出现
// var reg = /^a?$/;
// console.log(reg.test('')); // true
// console.log(reg.test('a')); // true
// console.log(reg.test('aaaa')); // false
// {n} 就是重复n次 这里以3为例
// var reg = /^a{3}$/;
// console.log(reg.test('')); // false
// console.log(reg.test('a')); // false
// console.log(reg.test('aaaa')); // false
// {n, } 就是可以重复n次或更多次
// var reg = /^a{3,}$/;
// console.log(reg.test('')); // false
// console.log(reg.test('a')); // false
// console.log(reg.test('aaaa')); // true
// {n,m} 就是可以重复 n 到 m 次(包括n和m) 它们中间不能打空格(n,m)
var reg = /^a{3,6}$/;
console.log(reg.test('')); // false
console.log(reg.test('a')); // false
console.log(reg.test('aaaa')); // true
console.log(reg.test('aaaaaaaaaaa')); // false
</script>
五、括号总结
1.中括号 字符集合 用来匹配括号内的任意字符
var reg =/^[abc]$/;
2.大括号 量词符 用来规定重复次数
// var reg = /^abc{3}$/;
// console.log(reg.test('abc')); // false
// console.log(reg.test('abcabcabc')); // false
// console.log(reg.test('abccc')); // true
// 没有加上小括号的时候,它这里只会重复最后的c三次,加了小括号提高它的优先级后,就是重复括号里面的内容三次
3.小括号 表示优先级 或者说是 提高括号内元素的优先级
var reg = /^(abc){3}$/;
console.log(reg.test('abc')); // false
console.log(reg.test('abcabcabc')); // true
console.log(reg.test('abccc')); // false
六、替换
语法格式:字符串.replace('内容1','内容2');
用内容2替换内容1
常用来规避危险、敏感词汇
具体例子如下:
<body>
<textarea name="" id="message"></textarea><button>提交</button>
<div></div>
<script>
// 替换 replace
// var test = 'hhhh and llll';
// var newt = test.replace('hhhh', 'wwww');
// var newt = test.replace(/hhhh/, 'wwww');
// console.log(newt);
var test = document.querySelector('#message');
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerHTML = test.value.replace(/黄色|暴力/g, '**');
}
</script>
</body>
所以上述例子会把输入内容中所有的“黄色”和“暴力”,用“**”来替换
补充:
正则表达式参数
/表达式/[switch]
switch 也叫做修饰符,有三个值
g 意为选中(包括)输入文本中的所有敏感词,使其全部被替换,如果没有它,每次使用replace只能替换一次
i 意为忽略大小写
gi 想来聪明的各位已经猜到了吧,没错,它就是前面两者的“优良继承者”,即选中所有需替换的内容,又进一步忽略了大小写的问题
芜湖,到这里,一些关于正则表达式的基本内容就讲完了,正则表达式的使用十分广泛,赶紧动手来体验一下吧
如有错误,请在下面进行指正!我们共同进步