1.创建一个正则表达式
方法一:使用一个正则表达式字面量,其由包含在斜杠之间的模式组成。
var reg1 = /a/;
var reg2 = /ab+c/;
方法二:调用RegExp对象的构造函数
var reg1 = new RegExp( "a" );
var reg2 = new RegExp( "ab+c" );
2.正则表达式中的特殊字符
1.转义字符
\s: 空格
\S: 非空格
\d: 数字
\D: 非数字
\w: 字母,数字,下划线
\W: 非字母,非数字,非下划线。
\ 进行转换。模式 /a*/ 代表会匹配 0 个或者多个 a。相反,模式 /a\*/ 将 '*' 的特殊性移除,从而可以匹配像 "a*" 这样的字符串。
. : 代表 任何一个字符
\b: 起始,结束,空格。eg:/\bm/匹配“moon”中得‘m’;/oo\b/并不匹配"moon"中得'oo',因为'oo'被一个“字”字符'n'紧跟着。
var str = "12 3123";
console.log( str.replace( /\b/g,"|" ) );//|12| |3123|
2.量词
{n,m}: n 和 m 都是整数。匹配前面的字符至少n次,最多m次。如果 n 或者 m 的值是0, 这个值被忽略。
*: 匹配前一个表达式0次或多次。等价于 {0,}。
+: 匹配前面一个表达式1次或者多次。等价于{1,}。
?: 匹配前面一个表达式0次或者1次。{0,1}。
.: 匹配除换行符之外的任何单个字符。
注意
:如果 ?
紧跟在任何量词 *、 +、? 或 {} 的后面
,将会使量词变为非贪婪的(匹配尽量少的字符
),和缺省使用的贪婪模式(匹配尽可能多的字符)正好相反
。
3. 字符类
1.[ ]
[]:匹配[]中内容的一个字符.这指的是范围匹配。
eg:/[a-zA-Z0-9]/:只要是数字,字母都能匹配上。
eg:/[abc]/:只要是a或者b或者c,其中一个都能匹配的上。
eg:/[a-z.]+/:都匹配“test.i.ng”中的所有字符。
[]:内部不需要加|,因为它就表示一个范围,有或者的含义。
举例说明1
var re = /0|1|2/g;
var re = /[012]/g;
var re = /[0-2]/g;
以上三种正则表达是一个意思
举例说明2
var re = /^([0-9]|1[0-9])$/g; // 判断数字范围是否在 0-19 之间
console.log( re.test(20) );//false
console.log( re.test(2) );//true
2. ^
^ : 匹配输入的开始。
eg: /^A/ 并不会匹配 "an A" 中的 'A',但是会匹配 "An E" 中的 'A'。^表示开始。
注意:^
放在[]
中,表示非
的意思。
eg: 例如,[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’,也匹配“chop”中的‘h’。 意思是:不是a不是b不是c,则匹配成功。
3. $
$ : 匹配输入的结束。
eg: /t$/ 并不会匹配 "eater" 中的 't',但是会匹配 "eat" 中的 't'。
3.使用正则表达式的方法,正则的贪婪模式和非贪婪模式
- test:使用正则匹配字符串,如果匹配 返回true,否则false
使用:正则.test(字符串);
<script>
//1.是否存在数字
var re1=/\d/;
console.log(re1.test("asbcc1"));//true
console.log(re1.test("asbcd"));//false
//2.是否全是数字
var re2=/\D/;
console.log(!re2.test("asbcc1"));//false
console.log(!re2.test("123445"));//true
</script>
2.search:使用正则匹配字符串,如果匹配 返回对应位置,否则返回-1。
使用:字符串.search(正则);
注意:正则区分大小写,如果想不区分大小写,则需要添加标识符 i 。对于两种创建正则的方式,i 有两中不同的写法。
<script>
var re=/Ao/;
var str1="aobbbllll";
console.log(str1.search(re));//-1
//简写方法 不区分大小写
var re1=/Ao/i;
console.log(str1.search(re1));//0
//调用RegExp对象的构造函数 不区分大小写
var re2=new RegExp("Ao","i");
console.log(str1.search(re2));//0
</script>
3.match: 使用正则匹配字符串,如果匹配,返回对应字符串,返回数组形式,否则 null。
使用: 字符串.match(正则)。
注意:
1. 返回的是类型是数组
2. 正则默认匹配成功就会停止,使用标识符 g(全局匹配)。
<script>
var str = "123a456b7890";
var re1 = /\d/;
var re2 = /\d/g;
var re3 = new RegExp(/\d/,"g");
var re4 = /\dA/ig;
var re5 = new RegExp(/\dA/,"ig");
console.log( str.match( re1 ) );//["1", index: 0, input: "123a456b7890", groups: undefined]
console.log( str.match( re2 ) );//["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
console.log( str.match( re3 ) );//["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
console.log( str.match( re4 ) );//["3a"]
console.log( str.match( re5 ) );//["3a"]
</script>
4.注意:正则的贪婪模式
首先需了解: +的含义是: 匹配前面一个表达式1次或者多次。等价于{1,}。
以下是贪婪模式
<script>
var str = "6z123a456b7890";
var re = /\d+/g;
console.log( str.match( re ) );//["6", "123", "456", "7890"]
</script>
解释:
1.正则的贪婪模式是指会匹配最长的,得到数目最多的项。
2.如果 ? 紧跟在任何量词 *、 +、? 或 {} 的后面,将会使量词变为非贪婪的(匹配尽量少的字符),和缺省使用的贪婪模式(匹配尽可能多的字符)正好相反。
以下是非贪婪模式
<script>
var str = "6z123a456b7890";
var re = /\d+?/g;
console.log( str.match( re ) );//["6", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
</script>
5.replace:使用正则匹配字符串,如果匹配成功,替换对应字符串,返回匹配后的字符串。如果不成功,则返回原字符串。
使用: 字符串.replace(正则,替换字符串);
<script>
var str = "miaovketang";
var re1 = /a/;//不全局匹配,意思为匹配成功就结束
var re2 = /a/g;//全局匹配,意思为匹配到字符串结束为止。
console.log( str.replace( re1,"b" ) );//mibovketang
console.log( str.replace( re2,"b" ) );//mibovketbng
</script>
4.正则的使用
1.敏感词过滤
每个网站都有自己的敏感词,例如这次的敏感词为:星星,好,天空,这三个词。
<script>
var str="星星挂在天空上好漂亮";
var re=/星星|天空|好/g;
var str2=str.replace(re,function ($0) {
var temp="";
console.log($0);//replace 第二个参数如果是函数的话,这个函数的第一个参数是每次匹配到的 字符。得到的结果 星星,天空,好
for(var i=0;i<$0.length;i++){
temp+="*";
}
return temp;
});
console.log(str2);
</script>
解析:
1.replace 第二个参数可以是一个字符串,或者函数
2.replace 第二个参数如果是函数的话,这个函数的第一个参数是每次匹配到的 字符。
3.我给参数的命名为$0,这个是随意的,只要不是关键字保留字都可以。例如a,b都可以的。
2.格式化时间
方式一:
<script>
var str = "2018-6-25"; //转化成 2018.6.25
// var str = "2018/6/25"; //转化成 2018.6.25
// var str = "2018~6!25"; //转化成 2018.6.25
// var str = "2018年6月25"; //转化成 2018.6.25
var re=/\D/g;
var str2=str.replace(re,".");
console.log(str2);//2018.6.25
</script>
方式二:
<script>
var str = "2018-6-25"; //转化成 2018.6.25
var re=/(\d+)\D/g;
var str2=str.replace(re,function ($0,$1) {
console.log($0,$1);
return $1+".";
});
console.log(str2);//2018.6.25
</script>
方式二的解析:replace 第二个参数如果是函数的话,
1.这个函数的 第一个参数 是每次匹配到的 字符。
2.之后的参数是通过()的分组,子项按照 "("确定次序。
3.例如第二个参数就是(\d+)匹配到的内容。
3.匹配模式参数的说明
使用情况举例:当使用replace,并且replace的第二个参数是函数。则这个函数的参数情况,第一个参数是正则匹配到的值
。之后的参数是通过( )的分组,子项按照 "("确定次序。
举例一:
<script>
var str = "2018-6-25"; //2018.6.25
// var re = /(\d+)\D/g;//使用这个正则,打印结果为:2018.6.25
var re = /(\d)+\D/g;//使用这个正则,打印结果为:8.6.25
console.log( str.replace( re,function($0,$1){
console.log( $0,$1 );
return $1+".";
} ) );
</script>
举例二:
<script>
var str = "2018-6-25"; //2018.6.25
var re = /(((\d)+)(\D))/g;
str.replace(re, function ($0, $1, $2, $3, $4) {
console.log($0, $1, $2, $3, $4);
//打印结果如下:
//2018- 2018- 2018 8 -
//6- 6- 6 6 -
});
</script>
4.过滤标签
<script>
var str = "<div>你好,</div><><a>美丽的</a>上海";//想转化成 你好,美丽的上海
var re=/<.*?>/g; // 如果后面加?,就会进入非贪婪模式。
// var re=/<.*>/g; //如果后面不加?,就会进入贪婪模式,结果为 上海。
str2=str.replace(re,"");
console.log(str2); //你好,美丽的上海。
</script>
5.检查是否含有class名
<body>
<div id="box" class="div box1 box2"></div>
<script>
function checkClass(el,val) {
var re = new RegExp("\\b"+val+"\\b","g")
return re.test(el.className);
}
var box=document.getElementById("box");
console.log(checkClass(box,"box2"));//true
console.log(checkClass(box,"box"));//false
</script>
</body>
6.找出重复次数最多的字符
方法一:不使用正则。
<script>
var str = "abcdabcaba";
var obj={};
var max=0;//出现次数
var maxValue = "";//出现的字符
//生成对象,字符为键名,此时为键值。
for(var i=0;i<str.length;i++){
if(!obj[str[i]]){
obj[str[i]]=1;
}else{
obj[str[i]]+=1;
}
}
console.log(obj);
//遍历进行比较,取出现的最大次数的键名和键值
//则为出现最多的字符和出现最多的次数。
for( var i in obj){
if(max< obj[i]){
max=obj[i];
maxValue=i;
}
}
console.log(max,maxValue);
</script>
方法二:使用正则。
<script>
var str = "abcdabcaba";
str=str.split("").sort().join("");
console.log( str );//aaaabbbccd
var re=/(\w)\1*/g;
var max=0;
var maxValue="";
str.replace(re,function ($0,$1) {
if(max<$0.length){
max=$0.length;
maxValue=$1;
}
});
console.log(max,maxValue);
</script>
解析:\1, \后面的是数字1,不是字母l。
\1是作用是\1前面的表达式,至少要重复一遍。而且前面的表达式要用( )包起来。
\1的使用说明
<script>
var re = /(\d)\1+/g;
console.log( re.test( "a00" ) );//true
console.log( re.test( "a01c" ) );//false
console.log( re.test( "a012c" ) );//false
console.log( re.test( "a0123131323c" ) );//false
console.log( re.test( "a0000c" ) );//true
</script>
7.检测qq号
<body>
<!--
1. 6-12位 纯数字
2. 不能以0开头
-->
<input type="text" id="t" />
<button id="btn">click</button>
<script>
var t = document.getElementById("t");
var btn = document.getElementById("btn");
btn.onclick=function () {
var str=t.value;
var re=/^([^0]\d{5,11})$/;
if(re.test(str)){
console.log("通过验证");
}else{
console.log("不通过验证");
}
}
</script>
</body>
8.去掉前后面的空格
<script>
var str = " hel lo ";
console.log( "|"+ str +"|" );
console.log( "|"+ str.trim() +"|" );//采用trim()方法也可以完成。
console.log( "|"+ trimFn(str) +"|" );
function trimFn( s ){
var re = /^\s+|\s+$/g;
return s.replace( re,"" );
//return re.test(s);
}
</script>