正则表达式都是操作字符串的
作用：对数据进行查找、替换、有效性验证
创建正则表达式的两种方式：
// 字面量方式 /js/ // 构造函数方式 regular expression new RegExp()
普通字符：字母 数字 汉字 _ 空格 ; , @ （没有特殊含义的符号）
两种匹配的方式：
test 测试，找到返回true，反之为false
exec 匹配字符，找到的话就返回该字符（以数组形式），反之返回null
这两个都是属于正则的方法，所以前面是跟的正则
var str="i love js"; var pattern=/js/; console.log(pattern.test(str));//true console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined] var pattern=/Js/; console.log(pattern.test(str));//false console.log(pattern.exec(str));//null
正则默认情况下是区分大小写的
使用模式修饰符可以设置不区分大小写
三种模式修饰符：
i ignoreCase 忽略大小写
g global 全局匹配
m multiline 多行匹配
var str="i love js"; var pattern=/Js/i; console.log(pattern.test(str));//true console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]
i g m这三个模式修饰符可以任意组合，无顺序要求
var str="i love js"; var pattern=new RegExp("js"); console.log(pattern.test(str));//true console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined] var pattern=new RegExp("Js"); console.log(pattern.test(str));//false console.log(pattern.exec(str));//null var pattern=new RegExp("Js","i"); console.log(pattern.test(str));//true console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]
字面量方式与构造函数方式的区别：
/js/i 直观简洁
new RegExp("js", "i") 可以由于变量的检测
var str="i love js"; var userInput="js";//需要匹配的字符在变量中 var pattern=/userInput/i;//该方式不可取，直接匹配的是userInput console.log(pattern.test(str));//false console.log(pattern.exec(str));//null var userInput="js";//需要匹配的字符在变量中 var pattern="/"+userInput+"/i";//该方式不可取，正则变为了字符串，不再具有test和exec方法 console.log(typeof pattern);//string console.log(pattern.test(str));//报错 console.log(pattern.exec(str));//报错 var pattern=new RegExp(userInput,"i"); console.log(typeof pattern);//object 正则属于正则对象 console.log(pattern.test(str));//true console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]
简单的转义字符
/ 表示正则的边界，匹配时需要进行转义
var str="//我是注释"; var pattern=/\/\//; console.log(pattern.exec(str));// ["//", index: 0, input: "//我是注释", groups: undefined]
字符串中如果存在 \ ，默认会对下一个字符进行转义，如果需要作为普通字符处理，就对转义字符 \ 再进行转义处理 \\
var str="\\\\"; console.log(str);// 结果只显示\\
普通字符加上 \ 可能会有特殊含义
如 \n 代表换行
var str="nba"; var pattern=/n/; console.log(pattern.exec(str));//匹配n ["n", index: 0, input: "nba", groups: undefined] var pattern2=/\n/; console.log(pattern2.exec(str));//匹配换行符 null
\t 匹配 tab键
var str=" hello"; var pattern=/\t/; console.log(pattern.exec(str));//匹配n [" ", index: 0, input: " hello", groups: undefined]
可以用 ascii码 来正则匹配字符
var str="hello\ncyy"; var pattern=/\x0A/; console.log(pattern.exec(str));//匹配\n ["↵", index: 5, input: "hello↵cyy", groups: undefined]
可以用 unicode 编码来正则匹配字符
var str=" 前面是tab键"; var pattern=/\u0009/; console.log(pattern.exec(str));//匹配tab键 [" ", index: 0, input: " 前面是tab键", groups: undefined]
unicode 常用于匹配汉字
匹配一个字符串中的所有中文：\u4e00-\u9fa5
var str="i am 陈莺莺"; var pattern=/[\u4e00-\u9fa5]/; console.log(pattern.exec(str));//匹配中文 ["陈", index: 5, input: "i am 陈莺莺", groups: undefined]
可以匹配换行符的有： \n \x0A \u000A
字符类
[ ] 匹配中间的任意一个字符
var str="javascript"; var pattern=/[js]/; console.log(pattern.exec(str));//匹配j ["j", index: 0, input: "javascript", groups: undefined]
[^ ] 表示取反
var str="javascript"; var pattern=/[^js]/;//匹配除了j和s之外的 console.log(pattern.exec(str));// ["a", index: 1, input: "javascript", groups: undefined]
[ ] 中间可以是一个范围
var str="javascript"; var pattern=/[k-z]/;//匹配k-z之间的字母 console.log(pattern.exec(str));// ["v", index: 2, input: "javascript", groups: undefined]
表示范围时，前面的必须小于等于后面的
var str="javascript"; var pattern=/[c-c]/;//前面等于后面 console.log(pattern.exec(str));// ["c", index: 5, input: "javascript", groups: undefined] var pattern2=/[c-b]/;//前面大于后面 console.log(pattern2.exec(str));// 报错
同时匹配大小写字母
var str="JavaScript"; var pattern=/[a-zA-Z]/;//前面等于后面 console.log(pattern.exec(str));// ["J", index: 0, input: "JavaScript", groups: undefined]
匹配所有数字 0-9
var str="JavaScript3333"; var pattern=/[0-9]/; console.log(pattern.exec(str));// ["3", index: 10, input: "JavaScript3333", groups: undefined]
[ ] 中间可任意组合，如
[a-zA-Z0-9@_]
常用的字符类：
. 匹配所有除了 \n 之外的字符
var str="3.14"; var pattern=/./; console.log(pattern.exec(str));// ["3", index: 0, input: "3.14", groups: undefined]
如果单纯匹配 . 转义即可
var str="3.14"; var pattern=/\./; console.log(pattern.exec(str));// [".", index: 1, input: "3.14", groups: undefined]
. 不能匹配换行符
var str="\n"; var pattern=/./; console.log(pattern.exec(str));// null
数字字母下划线
/[a-zA-Z0-9_]/ = /\w/
/[^a-zA-Z0-9_]/ = /\W/
var str="@_"; var pattern=/\w/; console.log(pattern.exec(str));// ["_", index: 1, input: "@_", groups: undefined]
数字
/[0-9]/ = /\d/
/[^0-9]/ = /\D/
var str="@_123"; var pattern=/\d/; console.log(pattern.exec(str));// ["1", index: 2, input: "@_123", groups: undefined]
/ / 匹配空格
/ / 匹配 tab
/\s/ 匹配空格或者制表符（tab）
/\S/ 匹配除了空格或者制表符之外的其他字符
匹配的顺序取决于字符串中的顺序
var str=" 9"; var pattern=/[\d\s]/; console.log(pattern.exec(str));// [" ", index: 0, input: " 9", groups: undefined]
重复
{n} 表示量词，出现 n 次
var str="123456789"; var pattern=/\d{3}/;//匹配3个数字 console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]
{n1, n2} 表示出现次数大于等于n1，小于等于n2
var str="123456789"; var pattern=/\d{2,3}/;//匹配2-3个数字，会尽可能多的匹配 console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]
{n1, } 表示大于等于n1
{ ,n2 } 不表示小于等于n2，这种写法是错误的
var str="123456789"; var pattern=/\d{1,}/; console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined] var pattern2=/\d{,2}/;//这种写法是错误的 console.log(pattern2.exec(str));// null
? = {0,1} 匹配0次或者1次
var str="123456789"; var pattern=/\d?/; console.log(pattern.exec(str));// ["1", index: 0, input: "123456789", groups: undefined]
+ = {1,} 至少1次
var str="123456789"; var pattern=/\d+/; console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]
* = 任意次（包括0次）
var str="123456789"; var pattern=/\d*/; console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]
匹配价格
var str="肯德基豪华午餐￥15.5元"; var pattern=/\d+\.?\d*/; //前面的数字 至少有1位 //. 出现0次或者1次 //后面的数字 可以有也可以没有，任意次 console.log(pattern.exec(str));// ["15.5", index: 8, input: "肯德基豪华午餐￥15.5元", groups: undefined]
匹配正整数和负整数
var str="肯德基豪华午餐￥15.5元"; var pattern=/-?[1-9]\d*/; var pattern=/-{0,1}[1-9]\d*/;
非贪婪的重复
正则匹配默认是贪婪模式，存在量词时会尽可能多的匹配
var str="aaab"; var pattern=/a+/; console.log(pattern.exec(str));//["aaa", index: 0, input: "aaab", groups: undefined]
在量词后面加上 ? ，表示由贪婪模式转为非贪婪模式，尽可能少的匹配
var str="aaab"; var pattern=/a+?/; console.log(pattern.exec(str));//["a", index: 0, input: "aaab", groups: undefined]
但是正则有一个原则，就是去找第一个可能匹配的字符
而不是最合适的位置
var str="aaab"; var pattern=/a+?b/;//此处并不会匹配到ab console.log(pattern.exec(str));//["aaab", index: 0, input: "aaab", groups: undefined]
如上，并不会匹配到ab，因为正则从0开始就匹配到了a，之后会一直沿着下去寻找b
贪婪匹配与非贪婪匹配的应用
var str="<td>第一格</td><td>第二格</td>"; var pattern=/<td>.*<\/td>/;//贪婪模式，匹配两格 console.log(pattern.exec(str));//["<td>第一格</td><td>第二格</td>", index: 0, input: "<td>第一格</td><td>第二格</td>", groups: undefined] var pattern2=/<td>.*?<\/td>/;//非贪婪模式，匹配一格 console.log(pattern2.exec(str));//["<td>第一格</td>", index: 0, input: "<td>第一格</td><td>第二格</td>", groups: undefined]
选择 |
var str="css js"; var pattern=/js|html|css/; console.log(pattern.exec(str));//["css", index: 0, input: "css js", groups: undefined]
选择最先匹配的，而不是最合适的
var str="ab"; var pattern=/a|ab/;//先尝试匹配a，匹配成功后，不再匹配ab console.log(pattern.exec(str));//["a", index: 0, input: "ab", groups: undefined]
正则匹配上传图片的后缀名：一般图片的后缀名有gif，jpg，jpeg，png等，并且不区分大小写
/\.gif|\.jpg|\.jpeg|\.png/i
分组和引用 ()
var str="abab"; var pattern=/(ab)+/;//将ab看成一个整体 console.log(pattern.exec(str));//(2) ["abab", "ab", index: 0, input: "abab", groups: undefined]
返回的数组中，第一个元素是匹配到的结果，第二个元素是 () 中分组的元素
( ) 捕获分组
(?: ) 不捕获分组
var str="abcd"; var pattern=/(abc)d/;//匹配到abcd，捕获到abc console.log(pattern.exec(str));//(2) ["abcd", "abc", index: 0, input: "abcd", groups: undefined] var str="abcd"; var pattern=/(?:abc)d/;//匹配到abcd，没有捕获 console.log(pattern.exec(str));//(2) ["abcd", index: 0, input: "abcd", groups: undefined]
平行分组依次返回
var str="abcd"; var pattern=/(ab)(cd)/;//匹配到abcd，第一个分组ab，第二个分组cd console.log(pattern.exec(str));//["abcd", "ab", "cd", index: 0, input: "abcd", groups: undefined]
嵌套分组，按左边括号的顺序来进行返回
var str="abcd"; var pattern=/(a(b(c(d))))/; console.log(pattern.exec(str));//(5) ["abcd", "abcd", "bcd", "cd", "d", index: 0, input: "abcd", groups: undefined]
可以在正则中直接使用分组 \n 代表第n个分组
var str="abcdab"; var pattern=/(ab)cd\1/;//\1代表第一个分组，即ab console.log(pattern.exec(str));//(2) ["abcdab", "ab", index: 0, input: "abcdab", groups: undefined]
分组的实际应用
匹配外层容器中的html文本，外层容器是不确定的标签
var str="<div><p>这是html文本</p></div>"; var pattern=/<([a-zA-Z]+)>(.*?)<\/\1>/;//\1代表闭合标签，必须与开始标签相同 console.log(pattern.exec(str));//["<div><p>这是html文本</p></div>", "div", "<p>这是html文本</p>", index: 0, input: "<div><p>这是html文本</p></div>", groups: undefined]
如上，第一个分组是外层标签名，第二个分组是获取到的内层html
.exec 返回的数组：
匹配到的结果
分组依次返回
index 匹配到的位置索引
input 被匹配的字符串
位置匹配之首尾匹配
^ 字符串的开始
$ 字符串的结束
var str="js"; var pattern=/^js/; console.log(pattern.exec(str));//["js", index: 0, input: "js", groups: undefined] var str="html js"; var pattern=/^js/; console.log(pattern.exec(str));//null
匹配全是数字
var str="123mm567"; var pattern=/^\d+$/; console.log(pattern.exec(str));//null if(pattern.test(str)){ alert("全是数字"); }else{ alert("不全是数字");//不全是数字 }
反向思考，匹配不是数字
var str="123mm567"; var pattern=/\D/; console.log(pattern.exec(str));//["m", index: 3, input: "123mm567", groups: undefined] if(!pattern.test(str)){ alert("全是数字"); }else{ alert("不全是数字");//不全是数字 }
位置匹配之单词边界匹配
单词边界 \b
非单词边界 \B
var str="js html"; var pattern=/js\b/; console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined] var str="@@@js@@@";//@也属于单词边界 var pattern=/\bjs\b/; console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined]
实现可兼容IE低版本的 getElementsByClassName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="odd1 odd odd2">1</li>
<li class="even">2</li>
<li class="odd">3</li>
<li class="even">4</li>
</ul>
<script>
function getByClass(className,node){
//高版本浏览器
if(document.getElementsByClassName(className)){
return document.getElementsByClassName(className)
}else{
//IE低版本浏览器
var node=node || document;
var arr=[];
var elements=node.getElementsByTagName("*");//获取所有元素
//注意，使用构造函数创建正则，其中的转义字符需要进行双重转义
var pattern=new RegExp("(^|\\s+)"+className+"($|\\s+)");
for(var i=0;i<elements.length;i++){
//匹配className
if(pattern.test(elements[i].className)){
arr.push(elements[i]);
}
}
return arr;
}
}
var odds=getByClass("odd");
for(var i=0;i<odds.length;i++){
odds[i].style.background="pink";
}
var evens=getByClass("even");
for(var i=0;i<evens.length;i++){
evens[i].style.background="#abcdef";
}
</script>
</body>
</html>
使用单词边界的思路也可实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="odd1 odd odd2">1</li>
<li class="even">2</li>
<li class="odd">3</li>
<li class="even">4</li>
</ul>
<script>
function getByClass(className,node){
//高版本浏览器
if(document.getElementsByClassName(className)){
return document.getElementsByClassName(className)
}else{
//IE低版本浏览器
var node=node || document;
var arr=[];
var elements=node.getElementsByTagName("*");//获取所有元素
//注意，使用构造函数创建正则，其中的转义字符需要进行双重转义
var pattern=new RegExp("\\b"+className+"\\b");
for(var i=0;i<elements.length;i++){
//匹配className
if(pattern.test(elements[i].className)){
arr.push(elements[i]);
}
}
return arr;
}
}
var odds=getByClass("odd");
for(var i=0;i<odds.length;i++){
odds[i].style.background="pink";
}
var evens=getByClass("even");
for(var i=0;i<evens.length;i++){
evens[i].style.background="#abcdef";
}
</script>
</body>
</html>
前瞻性匹配 (?= )
var str="javascript"; var pattern=/java(?=script)/;//如果java后面跟的是script，那么匹配出java console.log(pattern.test(str));//true var str="java"; var pattern=/java(?=script)/;//如果java后面跟的是script，那么匹配出java console.log(pattern.test(str));//false
负前瞻性匹配 (?!)
var str="javascript"; var pattern=/java(?!script)/;//如果java后面跟的是script，那么不匹配出java console.log(pattern.test(str));//false var str="java"; var pattern=/java(?!script)/;//如果java后面跟的不是script，那么匹配出java console.log(pattern.test(str));//true
RegExp 对象的实例方法
其中的转义字符需要进行双重转义
var pattern=new RegExp("\b"); console.log(pattern);// // var pattern=new RegExp("\\b"); console.log(pattern);// /\b/
因此，如果是 \ ，直面量方式转义为 \\，构造函数双重转义为 \\\\
var pattern=new RegExp("\\\\"); console.log(pattern);// /\\/
pattern 就是正则实例的对象，pattern 拥有的方法就是实例方法
如： .test() .exec()
var str="js js js"; var pattern=/js/; console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] var pattern=/js/g; console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 3, input: "js js js", groups: undefined] console.log(pattern.exec(str));// ["js", index: 4, input: "js js js", groups: undefined] console.log(pattern.exec(str));// null console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined]
如上，exec 有一个属性，叫 lastIndex，默认是0
如果设置为全局匹配，则 lastIndex 是上一次匹配的结束位置的下一位
如果匹配到为 null，就会自动重置为0，再次进行下一轮
分组之后也能捕获
var str="js js js"; var pattern=/(j)s/; console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] var pattern=/(j)s/g; console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 3, input: "js js js", groups: undefined] console.log(pattern.exec(str));// (2) ["js", "j", index: 6, input: "js js js", groups: undefined] console.log(pattern.exec(str));// null console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
实例：
var str="1.js 2.js 3.js"; var pattern=/js/g; var total=0;//出现的总次数 var result; while((result=pattern.exec(str))!=null){//先赋值再进行判断 total++; console.log(result[0]+"第"+total+"次出现的位置是："+result.index); } console.log("总共出现了"+total+"次");
test 与 exec 类似原理
var str="js js js"; var pattern=/js/; console.log(pattern.test(str));//true console.log(pattern.test(str));//true console.log(pattern.test(str));//true console.log(pattern.test(str));//true console.log(pattern.test(str));//true var pattern=/js/g; console.log(pattern.test(str));//true console.log(pattern.test(str));//true console.log(pattern.test(str));//true console.log(pattern.test(str));//false console.log(pattern.test(str));//true
.toString() 转字符串
.toLocaleString() 转本地字符串（仅限少数语言）
.valueOf() 返回正则本身
var pattern=new RegExp("a\\nb"); console.log(pattern.toString()); // /a\nb/ 此处返回的是字面量形式的字符串 console.log(pattern.toLocaleString());// /a\nb/ console.log(pattern.valueOf());// /a\nb/ console.log(pattern.valueOf()===pattern);// true
实例属性
.ignoreCase 判断是否忽略大小写
.global 是否全局
.multiline 是否匹配到多行
.source 返回字面量正则本身
var str="js js js"; var pattern=/js/im; console.log(pattern.ignoreCase);//true console.log(pattern.global);//false console.log(pattern.multiline);//true console.log(pattern.source);//js console.log(pattern.source===pattern);//false
.lastIndex 最后一次匹配的位置的后一位
var str="js js"; var pattern=/js/; console.log(pattern.lastIndex);//0 pattern.test(str); console.log(pattern.lastIndex);//0 pattern.test(str); console.log(pattern.lastIndex);//0 pattern.test(str); console.log(pattern.lastIndex);//0 pattern.test(str); console.log(pattern.lastIndex);//0 var pattern=/js/g; console.log(pattern.lastIndex);//0 pattern.test(str); console.log(pattern.lastIndex);//2 pattern.test(str); console.log(pattern.lastIndex);//5 pattern.test(str); console.log(pattern.lastIndex);//0 匹配不到时重置到0 pattern.test(str); console.log(pattern.lastIndex);//2
构造函数属性 RegExp.
.input 待匹配的字符串 = $_
.lastMatch 最近一次匹配到的字符 = $&
.leftContext 最近一次匹配时左边的字符 = $`
.rightContext 最近一次匹配时右边的字符 = $'
.lastParen 最近一次匹配到的子选项（分组中的内容） = $+
.$n 捕获分组
var str="js js"; var pattern=/(j)s/; pattern.exec(str); //待匹配的字符串 console.log(RegExp.input);//js js console.log(RegExp["$_"]);//js js //最近一次匹配到的字符 console.log(RegExp.lastMatch);//js console.log(RegExp["$&"]);//js //最近一次匹配时左边的字符 console.log(RegExp.leftContext);//空 console.log(RegExp["$`"]);//空 //最近一次匹配时右边的字符 console.log(RegExp.rightContext);// js console.log(RegExp["$'"]);// js //最近一次匹配到的子选项（分组中的内容） console.log(RegExp.lastParen);// j console.log(RegExp["$+"]);// j //捕获分组 console.log(RegExp.$1);// j
string 对象中，与正则相关的方法
str.search() 与是否全局无关，只查找一个，如果有，就返回 index
如果没有，就返回 -1
var str="js js"; var pattern=/(j)s/; console.log(str.search(pattern));//0 var pattern=/aa/; console.log(str.search(pattern));//-1
str.match()
普通匹配时与 exec 相同
全局匹配时：直接返回所有匹配的元素，分组会失效
var str="js js"; var pattern=/(j)s/; console.log(str.match(pattern));//(2) ["js", "j", index: 0, input: "js js", groups: undefined] var pattern=/aa/; console.log(str.match(pattern));//null var pattern=/(j)s/g; console.log(str.match(pattern));//(2) ["js", "js"] var pattern=/aa/; console.log(str.match(pattern));//null
str.match( pattern )
非全局匹配时才能返回分组中的内容
全局匹配时会返回所有匹配到的字符
m 和 g 组合，结合首尾匹配，体现
var str="1.js\n2.js\n3.js"; var pattern=/js$/g;//匹配行尾的js，默认是一行 console.log(str.match(pattern));//["js"] var pattern=/js$/mg;//匹配行尾的js，默认是多行 console.log(str.match(pattern));//(3) ["js", "js", "js"]
str.split() 字符串分割，转为数组
var str="1,2,3"; console.log(str.split(","));//(3) ["1", "2", "3"] var str="1, 2 , 3"; var pattern=/\s*,\s*/g; console.log(str.split(pattern));//(3) ["1", "2", "3"]
str.replace()
var str="i love js js"; console.log(str.replace("js","html"));//i love html js var pattern=/js/g; console.log(str.replace(pattern,"html"));//i love html html
replace 替换时间格式
var str="2020-2-15"; var pattern=/-/g; console.log(str.replace(pattern,"/"));//2020/2/15
使用 $n 进行分组引用
var str="i love pink"; var pattern=/(pink)/g; document.write(str.replace(pattern,"<span style='background:pink'>$1</span>"));
敏感词的过滤
var str="中国军队和阿扁一起办证"; var pattern=/国军|阿扁|办证/g; document.write(str.replace(pattern,"*"));//中*队和*一起*
一个文字对应一个 * 号
$0 是每次匹配到的内容
var str="中国军队和阿扁一起办证"; var pattern=/国军|阿扁|办证/g; document.write(str.replace(pattern,function($0){ console.log($0); var result=""; for(var i=0;i<$0.length;i++){ result+="*"; } return result; }));//中**队和**一起**
f5 浅刷新
ctrl+f5 深度刷新
常用的正则表达式：
1、QQ号：
全数字 首位不是0 最少5位 （目前最多11位，以后可能会扩增）
/^[1-9]\d{4,10}$/
/^[1-9]\d{4,}$/
2、用户名、昵称
2-18位 中英文数字及下划线组成
/^[\ue400-\u9fa5\w]{2,18}$/
/^[\ue400-\u9fa5a-zA-Z0-9_]{2,18}$/
3、密码
6-16位 不能有空白符 区分大小写
/^\S{6,16}$/
4、去除字符串首尾的空白字符
首先是去除首部或者尾部
var str=" cyy "; console.log("|"+str+"|");// | cyy | var pattern=/^\s+/; str=str.replace(pattern,"");//替换左边空白符 var pattern2=/\s+$/; /* 这里使用 \s+ 比使用 \s* 效率高 \s* 无论如何都会进行替换，哪怕没有空白符 \s+ 只在有空白符的时候进行替换，否则直接返回 */ str=str.replace(pattern2,"");//替换右边空白符 console.log("|"+str+"|");// |cyy|
同时去除首尾空白符
var str=" cyy "; console.log("|"+str+"|");// | cyy | var pattern=/^\s+|\s+$/g; str=str.replace(pattern,"");//替换左右空白符 console.log("|"+str+"|");// |cyy|
var str=" cyy "; console.log("|"+str+"|");// | cyy | function trim(str){ return str.replace(/^\s+/,"").replace(/\s+$/,""); } console.log("|"+trim(str)+"|");// |cyy|
5、转驼峰
str.replace(pattern, 要替换的内容） 第二个参数可以是一个匿名函数的返回值
匿名函数的参数中，第一个参数是匹配的内容，第二个参数开始是分组捕获的内容
var str="background-color"; var pattern=/-([a-z])/gi;// 此处匹配到-c //因为在匹配的结果中，第一个参数是匹配的内容，第二个参数开始是分组的内容 //因此此处all为 -c letter为 c //也可以用$0 $1表示 console.log(str.replace(pattern,function(all,letter){ return letter.toUpperCase(); }));// backgroundColor console.log(str.replace(pattern,function($0,$1){ return $1.toUpperCase(); }));// backgroundColor // 封装转驼峰函数 function toCamelCase(str){ return str.replace(pattern,function($0,$1){ return $1.toUpperCase(); }); } console.log(toCamelCase(str));//backgroundColor
6、匹配HTML标签
匹配开始标签和结束标签，标签中的内容不要
var str="<p style='color:red' class='active'>这是段落</p>"; var pattern=/<.+?>/g;//非贪婪模式匹配两个尖括号之间的内容 console.log(str.match(pattern)); var pattern=/<[^>]+>/g;//两个尖括号内部，没有匹配到结束的尖括号 console.log(str.match(pattern));
7、email 邮箱
/^(\w+\.)*\w+@(\w+\.)+[a-z]$/i
8、URL
/* http://www.baicu.com http或者https 可有可无 除了 ： 和 / ，其他的都属于主机名 */ //简化版，要求不高 /^(https?:\/\/)?[^:\/]+(:\d+)?(\/.*)?$/ //精确版 //协议： http:// https:// ftp:// mailto:// file:/// //匹配主机名 www.baidu.com //可以有连字符，但是连字符不能作为开头和结尾 /^([a-z0-9]+\.|[a-z0-9]+-[a-z0-9]+\.)*[a-z]+$/i
可以把经常用的正则存到一个对象中，如：
var regExp={ "chinese":/[\u4e00-\u9fa5]/, "qq":/^[1-9]\d{4,}$/, ... }
制作一个简易的正则测试工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } body{ background:#abcdef; } .wrap{ width:1000px; margin:10px auto; font-size:14px; } .container{ width:650px; float:left; } .wrap h1{ text-align: center; font-size:20px; } .textBox{ border:1px solid #fff; padding:5px; width:638px; height:130px; border-radius:5px; resize:none;/*不允许拖拽输入框*/ margin-top:15px; } div.textBox{ background:#eee; } .pattenInput{ width:180px; padding:5px; border:1px solid #fff; border-radius:5px; } .matchBtn{ width:100px; text-align: center; padding:5px; background-color: pink; border:none; border-radius:5px; margin-left:10px; } #matchResult span, #replaceResult span{ background:orange; } .list{ width:280px; float:right; border:1px solid #fff; border-radius:5px; background-color: #fff; margin-top:14px; padding:20px; } .list dt{ font-weight:bold; font-size:18px; margin-bottom:10px; color:#333; } .list dd{ height:40px; line-height:40px; } .list dd a{ display: block; text-decoration: none; color:#333; } .list dd a:hover{ color:orange; } .footer{ text-align: center; } .footer{ zoom:1; } .wrap::after{ content:""; display: block; clear:both; } .footer span{ color:orange; } </style> </head> <body> <div class="wrap"> <h1>正则表达式测试工具</h1> <div class="container"> <textarea id="userInput" class="textBox" placeholder="请输入需要匹配的文本"></textarea> <p> 正则表达式：<input type="text" placeholder="请输入正则表达式" class="pattenInput" id="pattenInput"> <input type="checkbox" name="modifier" value="i">忽略大小写 <input type="checkbox" name="modifier" value="g">全局匹配 <input type="checkbox" name="modifier" value="m">多行匹配 <input type="button" value="测试匹配" id="matchBtn" class="matchBtn"> </p> 匹配结果： <!-- 原来使用textarea，内部文本不允许加标签，因此换为div --> <div id="matchResult" class="textBox" placeholder="请输入需要匹配的文本"></div> <p> 替换文本：<input type="text" placeholder="请输入替换文本" class="pattenInput" id="replaceInput"> <input type="button" value="正则替换" id="replaceBtn" class="matchBtn"> </p> 替换结果： <!-- 原来使用textarea，内部文本不允许加标签，因此换为div --> <div id="replaceResult" class="textBox" placeholder="请输入需要匹配的文本"></div> </div> <dl class="list" id="list"> <dt>常用正则表达式</dt> <dd><a href="javascript:void(0)" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd> <dd><a href="javascript:void(0)" title="[1-9]\d{4,}">QQ</a></dd> </dl> </div> <p class="footer">本程序由<span>cyy</span>制作，欢迎大家使用~</p> <script> var userInput=document.getElementById("userInput"); var pattenInput=document.getElementById("pattenInput"); var modifiers=document.getElementsByName("modifier"); var matchBtn=document.getElementById("matchBtn"); var matchResult=document.getElementById("matchResult"); var replaceInput=document.getElementById("replaceInput"); var replaceBtn=document.getElementById("replaceBtn"); var replaceResult=document.getElementById("replaceResult"); var links=document.getElementById("list").getElementsByTagName("a"); var pattern=""; var modifier=""; //处理模式修饰符 for(var i=0;i<modifiers.length;i++){ modifiers[i].onclick=function(){ modifier="";//每次点击后先清空原来的 for(var j=0;j<modifiers.length;j++){ if(modifiers[j].checked){ modifier+=modifiers[j].value; } } } } //点击按钮进行匹配 matchBtn.onclick=function(){ //没有输入文本 if(!userInput.value){ alert("请输入待匹配的文本~"); userInput.focus();//获取光标 return;//不再执行下面的脚本 } //没有输入正则 if(!pattenInput.value){ alert("请输入待匹配的文本~"); pattenInput.focus(); return; } pattern=new RegExp("("+pattenInput.value+")",modifier); console.log(userInput); matchResult.innerHTML=pattern.exec(userInput.value) ? userInput.value.replace(pattern,"<span>$1</span>"): "(没有匹配到哦~)"; } //点击按钮进行替换 replaceBtn.onclick=function(){ //没有输入文本 if(!userInput.value){ alert("请输入待匹配的文本~"); userInput.focus();//获取光标 return;//不再执行下面的脚本 } //没有输入正则 if(!pattenInput.value){ alert("请输入待匹配的文本~"); pattenInput.focus(); return; } //没有输入替换文本 if(!replaceInput.value){ alert("请输入要替换的文本~"); replaceInput.focus(); return; } pattern=new RegExp("("+pattenInput.value+")",modifier); replaceResult.innerHTML=userInput.value.replace(pattern,"<span>"+replaceInput.value+"</span>"); } //点击右侧快捷正则 for(var i=0;i<links.length;i++){ links[i].onclick=function(){ pattenInput.value=this.title;//this指当前点击的元素 } } </script> </body> </html>
补充：
() 分组可以捕获内容
(?:) 不参与捕获
$1 $2... 分别表示捕获到的内容
如何获取捕获到的内容：
exec() 返回的数组中，第一个是匹配到的内容，第二个开始是捕获的内容
/\1/ 模式中，直接在正则中引用捕获到的内容
replace() 的第2个参数中，$1 （如果第2个参数是匿名函数，这个匿名函数的第一个参数是匹配到的内容，第二个参数开始是捕获到的内容）
RegExp.$1