一性锭、簡介
1.1 正則表達式的web常見場合
- 郵箱驗證
- 用戶名驗證
- 替換字符串某一部分
- 信息采集 用來分析有效的代碼段
1.2 字符串應(yīng)用正則
-
string.match(reg)正則查找字符串 -
string.search(reg)正則查找位置 -
string.replace(reg,'newstr')正則替換 -
string.split（reg）正則拆分
1.3 正則表達式3句話
1.3.1 要找什么字符罐柳？（5種方法）
- 字面值 比如：
hi就是找hi - 字符的集合
[abcd]匹配abdc任意一個 - 用范圍來表示字符
[0-9] [a-z][A-Z] - 字符簇 就是系統(tǒng)為常用的字符集合創(chuàng)建的一個簡寫
- 例如：
\d表示[0-9]\w代表[0-9a-zA-Z_]\s代表[\t\v\f\r\n]（空白符）
- 例如：
- 補集的形式來表示字符集合
- 例如：
[0-9]補集[^0-9] - 對于字符簇只需把字母大寫即可表示補集
\d-->\D（非數(shù)字）\w-->\W（代表a-z0-9A-Z之外的東西）\s-->\S(代表非空白字符)
- 例如：
- 點代表 任意字符 (不包括換行符)
1.3.2 從哪里找,找到哪？
-
\b單詞邊界\bhi從單詞邊界開始匹配hi -
\B單詞的非邊界 把單詞的中間某一部分取出來 把中間含有hi的單詞取出來 即hi不能再兩端 -
^從字符串的起始位置開始匹配 -
$匹配到字符串的額結(jié)束位置
1.3.3 找多少
-
*表示匹配0-無窮==等價(0,) -
+表示匹配1-無窮==等價(1,) -
?表示[0,1] ==等價(0,1) -
a(n): 字符a準確出現(xiàn)n次 -
a(n,):字符a至少出現(xiàn)n次 -
a(n,m):n到m次
1.4 貪婪模式
- 個數(shù)修飾符默認是貪婪模式 盡量多找
- 是指在上面的個數(shù)修飾符后面加
?病蛉，則為非貪婪模式，盡量少的找
模式：
- 以匹配為例默認情況 match找到一次就結(jié)束 能否告訴匹配過程 一直找 在全文范圍內(nèi)一直找
-
g表示全局模式 global 找所有的 而不是就找一行就結(jié)束 -
iignore 忽略大小寫 -
s單行模式（把整篇文章看成一行）js不支持單行模式 -
m多行模式
二、語法
2.1 基本元字符
-
.： 匹配除了換行符之外的任何單個字符 -
\： 在非特殊字符之前的反斜杠表示下一個字符是特殊的 -
|： 邏輯或操作符 -
[]：定義一個字符集合赐稽，匹配字符集合中的一個字符板甘，在字符集合里面像.党瓮，\這些字符都表示其本身 -
[^]：對上面一個集合取非 -
-：定義一個區(qū)間，例如[A-Z]盐类，其首尾字符在ASCII字符集里面
2.2 數(shù)量元字符
-
{m,n}：匹配前面一個字符至少m次至多n次重復(fù)寞奸，還有{m}表示匹配m次，{m,}表示至少m次 -
+： 匹配前面一個表達式一次或者多次在跳，相當于{1,}枪萄，記憶方式追加(+)，起碼得有一次 -
*： 匹配前面一個表達式零次或者多次猫妙，相當于{0,}瓷翻，記憶方式乘法(*)，可以一次都沒有 -
?： 單獨使用匹配前面一個表達式零次或者一次割坠，相當于{0,1}
2.3 位置元字符
-
^： 單獨使用匹配表達式的開始 -
\$： 匹配表達式的結(jié)束 -
\b：匹配單詞邊界 -
\B：匹配非單詞邊界 -
(?=p)：匹配p前面的位置 -
(?!p)：匹配不是p前面的位置
2.4 特殊元字符
-
\d：[0-9]逻悠，表示一位數(shù)字，記憶方式 digit -
\D：[^0-9]韭脊，表示一位非數(shù)字 -
\s：[\t\v\n\r\f]童谒，表示空白符，包括空格沪羔，水平制表符（\t）饥伊，垂直制表符（\v）象浑，換行符（\n），回車符（\r）琅豆，換頁符（\f）愉豺，記憶方式 space character -
\S：[^\t\v\n\r\f]，表示非空白符 -
\w：[0-9a-zA-Z]茫因，表示數(shù)字大小寫字母和下劃線蚪拦，記憶方式 word -
\W：[^0-9a-zA-Z]，表示非單詞字符
2.5 標志字符
-
g: 全局搜索 記憶方式global -
i：不區(qū)分大小寫 記憶方式 ignore -
m：多行搜索
三冻押、match驰贷，test，exec洛巢，search的返回值
3.1 match的用法
在不加全局“g”的情況下
var str="wo shi zhong guo ren";
console.log(str.match(/o/));
// 返回的結(jié)果是：["o", index: 1, input: "wo shi zhong guo ren"]括袒；
在加全局“g”的情況下
var str="wo shi zhong guo ren";
console.log(str.match(/o/g));
返回的結(jié)果是：["o", "o", "o"]；
3.2 exec的用法
var str="wo shi zhong guo ren";
var re=/o/;
console.log(re.exec(str));
// 返回的結(jié)果是：["o", index: 1, input: "wo shi zhong guo ren"]稿茉；
// exec返回的和match不加全局“g”’一樣
3.3 test的用法
var str="wo shi zhong guo ren";
var re=/o/;
console.log(re.test(str));
// 返回的結(jié)果是：true（如果找不到返回的則是false）
3.4 search的用法
- 關(guān)于search用法其實很簡單锹锰，它和indexOf是一樣的，就是找到index漓库，而且是從前往后數(shù)的恃慧。
var str="wo shi zhong guo ren";
var re=/o/;
console.log(str.search(re));
返回的結(jié)果是：1；
四渺蒿、應(yīng)用
4.1 例1
<html>
<head>
<meta charset="UTF-8">
<title>正則-例子1</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配hi" onclick="t1();"></p>
<p><input type="button" value="正匹配單詞hi" onclick="t2();"></p>
<p><input type="button" value="匹配hi開頭的單詞但不是hi" onclick="t3();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /hi/;//僅僅是看字符串中有沒有hi
alert(reg.test(cv));//滿足 返回true 不滿足 返回false
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\bhi\b/;//正則測試單詞hi
alert(reg.test(cv));//滿足 返回true 不滿足 返回false
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\bhi\b/;//正則測試hi開頭的單詞但不是hi
alert(reg.test(cv));//滿足 返回true 不滿足 返回false
}
</script>
</body>
</html>
4.2 例2-要找什么字符串
<html>
<head>
<meta charset="UTF-8">
<title>要找什么字符</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="找不好的數(shù)字" onclick="t1();"></p>
<p><input type="button" value="有沒有數(shù)字" onclick="t2();"></p>
<p><input type="button" value="有沒有大寫字母" onclick="t3();"></p>
<p><input type="button" value="是否全為數(shù)字" onclick="t4();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[347]/;// 匹配347任意一個字符的集合[abcd] 匹配abdc任意一個
alert(reg.test(cv));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = /[0123456789]/;
//var reg = /[0-9]/;// 匹配有沒有數(shù)字
var reg = /\d/;// \d 表示[0-9]
alert(reg.test(cv));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[A-Z]/;// 匹配有沒有數(shù)字
alert(reg.test(cv));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[^0-9]/;// 匹配非數(shù)字 0-9之外的字符 對于網(wǎng)上發(fā)布手機號之類的很有用 比如1300 把00換成OO 就沒法認出
if(reg.test(cv)){
alert('有非數(shù)字存在');
}else{
alert('全是數(shù)字');
}
}
</script>
</body>
</html>
4.3 例3-從哪里開始匹配
<html>
<head>
<meta charset="UTF-8">
<title>74-從哪里開始匹配</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配hi" onclick="t1();"></p>
<p><input type="button" value="匹配hi開頭及hi開頭的單詞" onclick="t2();"></p>
<p><input type="button" value="匹配hi開頭的單詞但不是hi" onclick="t3();"></p>
<p><input type="button" value="匹配進行時的單詞" onclick="t4();"></p>
<p><input type="button" value="匹配un前綴的反義詞" onclick="t5();"></p>
<p><input type="button" value="匹配單詞中間的hi部分" onclick="t6();"></p>
<p><input type="button" value="匹配輸入的名字是不是lisi" onclick="t7();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /hi/;//僅僅是看字符串中有沒有hi
alert(reg.test(cv));//滿足 返回true 不滿足 返回false
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = /\bhi.+/;// 錯誤1 匹配hi開頭的單詞
////var reg = /\bhi\w+/;// 錯誤2
var reg = /\bhi\w*/;
alert(reg.exec(cv));//exec返回一個對象 沒找到返回none
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\bhi/;//正則測試hi開頭的單詞但不是hi
alert(reg.exec(cv));//exec返回一個對象 沒找到返回none
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\b[\w]+ing\b/;//*表示匹配0-無窮 +表示匹配1-無窮
alert(reg.exec(cv));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\bun[\w]+\b/;//匹配un前綴的反義詞
alert(reg.exec(cv));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\Bhi\B/;//匹配單詞中間的hi部分
alert(reg.exec(cv));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^lisi$/;//匹配輸入的名字是不是lisi
alert(reg.exec(cv));
}
</script>
</body>
</html>
4.4 例4 正則應(yīng)用字符串
<html>
<head>
<meta charset="UTF-8">
<title>正則應(yīng)用字符串</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="查找中間含有hi的單詞" onclick="t1();"></p>
<p><input type="button" value="查找所有中間含有hi的單詞" onclick="t2();"></p>
<p><input type="button" value="查找所有中間含有hi的單詞糕伐，不區(qū)分大小寫" onclick="t3();"></p>
<p><input type="button" value="替換JavaScript標簽" onclick="t4();"></p>
<p><input type="button" value="把連接換成空連接" onclick="t5();"></p>
<p><input type="button" value="把每一行的結(jié)尾的數(shù)字換成#" onclick="t6();"></p>
<p><input type="button" value="替換goods中多余的O" onclick="t7();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\Bhi\B/;//查找中間含有hi的單詞
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\Bhi\B/g;//查找所有中間含有hi的單詞
alert(cv.match(reg));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\Bhi\B/gi;//查找所有中間含有hi的單詞 g是全局 i ignore 忽略大小寫
alert(cv.match(reg));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /<script.*<\/script>/;//替換JavaScript標簽
alert(cv.replace(reg,'哈哈哈'));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
/*
. 代表任意,但不包括換行
可以用一對反義詞來匹配所有. \d\D等
不能跨行（貪婪模式）
*/
var reg = /<a[\s]+[\d\D]*<\/a>/; //正則替換鏈接
alert(cv.replace(reg,'<a href="#">文字</a>'));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\d+$/gm;//把每一行的結(jié)尾的數(shù)字換成# m 多行模式
alert(cv.replace(reg,'#'));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /go{3,}?ds/;//替換goods中多余的O
alert(cv.replace(reg,'goods'));
}
</script>
</body>
</html>
4.5 例5-預(yù)查
<html>
<head>
<meta charset="UTF-8">
<title>預(yù)查</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="匹配進行時的單詞" onclick="t1();"></p>
<p><input type="button" value="匹配進行時的單詞的詞根部分,正向預(yù)查" onclick="t2();"></p>
<p><input type="button" value="查找winxp,負向預(yù)查" onclick="t3();"></p>
<p><input type="button" value="找出un*系列單詞的詞根" onclick="t4();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\b[\w]+ing\b/;
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\b[\w]+(?=ing)/g;//匹配進行時的單詞的詞根部分 不要ing結(jié)尾 預(yù)查不消耗字符
alert(cv.match(reg));
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\bwin(?!95)/g;//win98 win97 win95 win32 winxp win2003要求把win95過濾
alert(cv.match(reg));
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
//var reg = /\w+(?<=un)/g;//找出un*系列單詞的詞根 js不支持向前正向預(yù)查
alert(cv.match(reg));
}
</script>
</body>
</html>
4.6 例6-反向引用
<html>
<head>
<meta charset="UTF-8">
<title>反向引用</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="把連接換成空連接，保留文字" onclick="t1();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /<a[\s]+[^>]+>([^<>]+)<\/a>/; //鏈接表達式 這個一部分是子表達式 ([^<>]+)
// alert(reg.exec(cv));
alert(cv.replace(reg,'<a href="#"">$1</a>'));
}
</script>
</body>
</html>
4.7 例7-正則練習
<html>
<head>
<meta charset="UTF-8">
<title>正則練習</title>
<style type="text/css">
textarea{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="1-找首尾相同的單詞" onclick="t1();"></p>
<p><input type="button" value="2-手機號第4位到第七位換成*" onclick="t2();"></p>
<p><input type="button" value="3-統(tǒng)一空格" onclick="t3();"></p>
<p><input type="button" value="4-把名字中的,去掉" onclick="t4();"></p>
<p><input type="button" value="5-把aaabb換成ab" onclick="t5();"></p>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /\b([\w])[\w]*\1\b/g;// \1注意引用方式 [\w]任意一個 [\w]*任意多個 找首尾相同的單詞
/**
* *如何引用子表達式所匹配的結(jié)果蘸嘶？
*
* 答： 在表達式內(nèi)部 反向引用時 \n來匹配第N個子表達式的結(jié)果 子表達式當成變量來傳遞時良瞧，$N來匹配第N個子表達式的匹配結(jié)果
*
*/
alert(cv.match(reg));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /(1(3|5|8|)\d)\d{4}(\d{4})/;//字表達式(3|5|8|) (\d{4}) {4}代表任意4個
// alert(cv.match(reg));//打印結(jié)果18878553070，188训唱，3070
alert(cv.replace(reg,'$1****$3'));//188****4070
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /[ \t\u3000]+/g;//找空白符 第一個是半角的空格 \s包含所有空白符 \u3000表示 全角空格的16進制Unicode編碼
alert(cv.replace(reg,','));//
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /([\u4E00-\u9FA0]),([\u4E00-\u9FA0])/g; // 找中文用Unicode編碼表的中文范圍
alert(cv.replace(reg,','));
}
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //;
alert(cv.replace(reg,','));
}
</script>
</body>
</html>
4.8 例8-常用正則
<html>
<head>
<meta charset="UTF-8">
<title>常用正則解答</title>
<script type="text/javascript">
function t1(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /(\w)\1+/g; //查找連續(xù)多個字符 把aaabbccdd換成abcd這個格式
/**\1 后向引用褥蚯，表示表達式中，從左往右數(shù)况增，第一個左括號對應(yīng)的括號內(nèi)的內(nèi)容赞庶。
以此類推，\2表示第二個澳骤，\0表示整個表達式**/
alert(cv.replace(reg,'$1'));
}
function t2(){
var cont = document.getElementById('cont');
var cv = cont.value;
//手機號正則：
//1開頭
//358第二位
//后九位
var reg = /1[358]\d{9}/g; // 這種情況適合在一段文本中分析出手機號
alert(cv.match(reg));//分析手機號
}
function t3(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^1[358]\d{9}$/g;
alert(reg.test(cv));// test 驗證手機號
}
function t4(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^\s+|\s+$/g; // | 并列 或者 去除兩端空格
alert('--'+cv.replace(reg,'')+'--');
}
//借助正則限制在一個有限范圍內(nèi) 防止sql注入
function t5(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^[\w\u4E00-\u9FA0]{4,16}$/; // \u4E00-\u9FA0 中文對應(yīng)的Unicode編碼 驗證由字母數(shù)字下劃線中文組合的4-16位用戶名
alert(reg.test(cv));
}
function t6(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = /^[0-9a-zA-Z]\w*(\.[\w]+)*@[0-9a-zA-Z\-]+(\.[\w]+)+$/;
alert(reg.test(cv));
}
function t7(){
var cont = document.getElementById('cont');
var cv = cont.value;
var reg = //;
alert(cv.replace(reg,''));
}
</script>
</head>
<body>
<textarea id='cont'></textarea>
<p><input type="button" value="1-替換相同字符串" onclick="t1();"></p>
<p><input type="button" value="2-分析出手機號" onclick="t2();"></p>
<p><input type="button" value="3-驗證手機號" onclick="t3();"></p>
<p><input type="button" value="4-去除兩端空格" onclick="t4();"></p>
<p><input type="button" value="5-驗證由字母數(shù)字下劃線中文組合的4-16位用戶名" onclick="t5();"></p>
<p><input type="button" value="6-驗證郵箱" onclick="t6();"></p>
<p><input type="button" value="7-清空script代碼" onclick="t7();"></p>
</body>
</html>
五歧强、總結(jié)
正則總結(jié)回顧
