js正則表示式教程示例
阿新 • • 發佈:2018-12-17
正則表示式是專案開發中常用的模式,內容替換、表單認證、網路爬蟲等,通過以下的例子我相信可以大概掌握正則表示式了
定義字符集 []
- [a-e]表示a到e這些字元中的某一個字元
- [a-z]26個字母之一
- [aeiou]表示aeiou這5個字元其中的某一個字元
- [a-zA-Z]表示大寫、小寫字母中的某一個字元
- [a-zA-Z0-9_-]表示大寫、小寫字母、0-9、_、-中的某一個字元
- [0-9]表示0到9之間的任意一個數字
[9-3] [z-a]不能從大往小寫,有語法錯誤
<script type="text/javascript"> //定義字符集 //在沒有特殊限制的時候就是“單次”匹配 //從左往右匹配到第一符合模式的內容即可 var str = "2015-09-12 is a SunShine Day"; var reg = /[a-z]/; //["i"] var reg = /[M-W]/; //["S"] var reg = /[uxpq]/; //["u"] var reg = /[0-9]/; //["2"] var reg = /[a-z_-]/; //["-"] var rst = str.match(reg); console.log(rst); </script>
特別字符集
- $:匹配輸入字串的結尾位置
- ^(託字元):表示字串的開始位置,或者表示非
- ():標記一個字表達式的開始和結束位置
- *:其前面那個單元出現0次或以上(任意次數)
- +:其前面那個單元出現1次或以上
- ?:其前面那個單元出現0次或者1次
- .點:匹配除換行符\n之外的任何單字元
- \:用來轉義的符號
|:表示兩個之間的一個選擇,或
<script type="text/javascript"> //特別字符集 //* ? + var str = "2018-03-01 is a SunShine Day"; var reg = /[0-9]+/; //["2018"] var str = "gooogle"; var reg = /go+gle/; //["gooogle"] var str = "ggle"; var reg = /go*gle/; //["ggle"] var str = "hellow 0 javascript"; var reg = /[0-9]+/; //["0"] var reg = /[0-9]*/; //[""]匹配空的字串,因為開始的時候就出現了0次,"沒有" var reg = /loe?w/; //["low"] var rst = str.match(reg); console.log(rst); //.點 \ | var str = "svovk(dsf?>?*&{})!^\n}PPoo*&?"; var reg = /.*/; //["svovk(dsf?>?*&{})!^"] var str = "xiaoming like eat apple"; var reg = /banana|apple/; //["apple"] var str = '<div class="box">the box</div>'; var reg = /<div class=\"box\">the .*<\/div>/; //["<div class="box">the box</div>"]轉義在正則中有特殊含義的字元,例如| / . ? + 等 var rst = str.match(reg); console.log(rst); //^和$符號 var str = "php is the best language"; var reg = /[language]/; //["language"] var reg = /[^language]/; //null 'language'在字串的開始位置沒有出現 var reg = /[^php]/; //["php"] var reg = /[languag$]/; //null 'languag'在字串的結尾位置沒有出現 var reg = /language$/; //["language"] //^和$兩符號要出現在每個正常的正則表示式裡邊
//作用:可以“完整”地匹配輸入字串的資訊
//手機號碼驗證:13開始,後續有9位數字,不能新增其餘內容
var str = “13250185056”;
var reg = /^13[0-9]{9}$/;//{m}前面單元嚴格出現m次
var rst = str.match(reg);
console.log(rst);//()小闊號 //作用: //提高字表達式優先順序 //從一個大的字串中拆分小的字元串出來 var str = "gogle"; var reg = /(go)+(gle)/; //rst[0] = "gogle";成功匹配的字串 //rst[1] = "go";第一個()裡面匹配成功的字串,不成功為undefined //rst[2] = "gle"第二個()裡面匹配成功的字串,不成功為undefined //提取html裡面的關鍵內容 var str = '<div id="today" class="tqingtoday"><h3 style="padding-bottom:0px;">北京</h3><ul><li class="tqpng_01"><li class="sd">晴</li><li class="font_05">'; var reg = /<h3.*>(.*)<\/h3>/; var rst = str.match(reg); console.log(rst[0]);//"<h3 style="padding-bottom:0px;">北京</h3>" console.log(rst[1]);//"北京",成功提取出北京 </script>
()小括號使用擴充套件
<script type="text/javascript"> //小括號模式單元 重複使用 var str = "2018-09-09 09:09:09"; //匹配到的時間特點:月份、日期、時、分、秒都一致 var reg = /[0-9]+-[0-9]+-[0-9]+ [0-9]+:[0-9]+:[0-9]+/; // ["2018-09-09 09:09:09"] //通過“\1”重複匹配前面第一個小括號模式單元內容 var reg = /[0-9]+-([0-9]+)-\1 \1:\1:\1/; // ["2018-09-09 09:09:09","09"] //通過“\2”重複匹配前面第二個小括號模式單元內容 var reg = /([0-9]+)-([0-9]+)-\2 \2:\2:\2/; //["2018-09-09 09:09:09","2018","09"] var str = "2018:11 2018&11"; var reg = /([0-9]+):([0-9]+) \1&\2/; //["2018:11 2018&11","2018","11"] //\m模式單元重複使用 與 {m}、+、*的區別: //1、\m\m\m\m 限制前面單元出現多次 // 重複匹配前面第m個小括號內容 // 要求 匹配內容與被匹配內容的“大小和資料型別”都一致 //2、{m}、+、*限制前面單元出現多次,出現的內容只要保證“資料型別”一致即可 var str1 = "2018-03-03-03-03-03"; var str2 = "2018-03-12-15-23-57"; var reg = /[0-9]+(-[0-9]+)\1\1\1\1/; //["2018-03-03-03-03-03","-03"] null(str2匹配不成功) var reg = /[0-9]+(-[0-9]+){5}/; //["2018-03-03-03-03-03","-03"] ["2018-03-03-03-03-03","-57"] //{5}、+、* 匹配以上兩個str效果一樣 var rst = str.match(reg); console.log(rst); </script>
模式修正符
var 模式名稱 = /模式內容/模式修正符;
- i:忽略大小寫
g:全域性匹配(進行全域性匹配的時候不給體現”模式單元”內容,預設是單次匹配,非全域性)
<script type="text/javascript"> //模式修正符 var str = "Beijing2008Guangzhou2010Shanghai2012"; var reg = /[a-z]+([0-9]+)/ig; var rst = str.match(reg); console.log(rst); //["Beijing2008","Guangzhou2010","Shanghai2012"],沒有index和input屬性,不獲取()裡面的內容 </script>
組合字符集
- \d:表示數字[0-9]
- \D:表示非數字[^0-9]
- \w:表示字母、數字、下劃線中其中一個[a-zA-Z0-9_]
- \W:非字母、數字、下劃線[^a-zA-Z0-9_]
- \s:表示空格
\S:表示非空格
<script type="text/javascript"> //組合字符集 //\d:表示數字[0-9] \D:表示非數字[^0-9] var str = "2018/03/01"; var reg = /\d+/; //["2018"] var reg = /\D/g; //["/","/"] var reg = /[^0-3]+/; //["8/"] //\w:表示字母、數字、下劃線中其中一個[a-zA-Z0-9_] \W:非字母、數字、下劃線[^a-zA-Z0-9_] var str = "[email protected]"; var reg = /\w+/; //["asdas326_JIO"] var reg = /\W/g; //["@","."] //s:表示空格 \S:表示非空格 var str = "hellow guangzhou"; var reg = /[a-z]+\s\s\s\s\s\s[a-z]+/; //["hellow guangzhou"] var rst = str.match(reg); console.log(rst); </script>
限制字符集
- {m}:前面單元出現m次
- {m,}:前面單元至少出現m次,至多不限制
- {m,n}:前面單元出現至少m次,至多n次
- [^lsdf]:不是中括號中的任意一個字元
- [^a-f]:不是中括號中範圍的任意一個字元
- var reg = /^apple/; 匹配內容開始有apple字樣
- var reg = /[^a-h]/; 不匹配a-h之間的字母
正向反向匹配
- 正向匹配:我們要查找出來的內容,右邊必須出現指定的資訊,並且其是輔助條件,不是結果的一部分。
var reg = /pattern(?=模式)/;
正向不匹配:我們要查找出來的內容,右邊不能出現指定的資訊,右邊的資訊是輔助條件,非結果部分。
var reg = /pattern(?!模式)/;
例如:<script type="text/javascript"> //正向匹配:小寫字母字串右邊要出現連續數字資訊 var str1 = "javascript2018"; var str2 = "[email protected]"; var reg = /[a-z]+(?=\d+)/; //["javascript"] 不匹配模式裡面的內容 null沒有在右邊出現連續數字 var str = "https://www.bmob.cn/shop/index.php?price=50&platform=0&type=2" //通過正向匹配獲取引數名稱 price、platform、type var reg = /[a-z]+(?==)/g; //["price","platform","type"] //正向不匹配:右邊不能出現連續數字資訊 var str1 = "todayABC254"; var str2 = "today123"; var reg = /[a-z]+(?!\d+)/; //["today"] 不匹配模式裡面的內容 null在右邊出現了連續數字 var rst = str.match(reg); console.log(rst); </script>
反向匹配:左邊必須出現指定資訊
var reg = /(?<=模式)pattern/;
- 反向不匹配:左邊不能出現指定資訊
var reg = /(?<!模式)pattern/;