搜尋
首頁web前端js教程JavaScript學習小結(7)之JS RegExp

在js中,正規表示式是由一個RegExp物件表示的,RegExp 是正規表示式的縮寫。 RegExp簡單的模式可以是一個單獨的字元。更複雜的模式包括了更多的字符,並可用於解析、格式檢查、替換等等。可以使用一個RegExp()建構函數來建立RegExp對象,也可以使用直接量語法

在js中,正則表達式是由一個RegExp對象表示的,RegExp 是正則表達式的縮寫。 RegExp簡單的模式可以是一個單獨的字元。更複雜的模式包括了更多的字符,並可用於解析、格式檢查、替換等等。可以使用一個RegExp()建構函數來建立RegExp對象,也可以使用直接量語法。

1、RegExp簡介。

  RegExp即正規表示式(Regular Expression,在程式碼中常簡寫為regex、regexp或RE/re/reg),就是使用單一字串來描述、符合一系列符合某個句法規則的字串搜尋模式,搜尋模式可用於文字搜尋和文字取代。

  正規表達式是由一個字元序列形成的搜尋模式,當你在文字中搜尋資料是,你可以用搜尋模式來描述你要查詢的內容,也就是說正規表示式是描述字元模式的對象,可用於對字串模式匹配及檢索替換,是對字串執行模式匹配的強大工具。

  所謂正則表達式,直接可理解為規則或者模式表達式,就是表達了某一種計算機可以理解的規則,而一般人很難讀懂的文字表達方式,可用於所有文本搜索和文本替換的操作,簡單說就是處理字串。

2、字串方法。

  (1)、charAt()  取得某個字符,傳回字串某一位的字符。

  (2)、split()  分割字串,取得陣列。

  (3)、search()  找某個字元首次出現的位置,配合正規使用較好,傳回值為數值,沒找到回傳-1。

  (4)、match()  查找字串中指定字符並返回該字符,如果不使用正則,則只返回首次出現的指定字符,不會再向後匹配,如果使用正則並進行全局匹配,則以數組形式傳回字串中所有指定的字符,沒找到則傳回null。

  (5)、replace()  替換字符,返回一個新字串,配合正則使用更好,可以替換所有匹配。

 <script>
 var str=&#39;abcdefgca&#39;;
 //返回字符串中某一位的字符。
 alert(str.charAt());  //返回:d
 //查找字符串首次出现的位置。
 alert(str.search(&#39;z&#39;));  //返回:-
 //查找指定的字符。
 //只返回第一次出现的c,不再向后匹配。
 alert(str.match(&#39;c&#39;));  //返回:c
 //将&#39;a&#39;替换为&#39;i&#39;。
 //只替换了第一个位置的a,不再向后匹配。
 alert(str.replace(&#39;a&#39;, &#39;i&#39;));  //返回:ibcdefgca
 //分割字符串。
 var str=&#39;--aaa--cd&#39;;
 var arr=str.split(&#39;-&#39;);  //返回:,,aaa,,cd
 alert(arr);
 </script>

實例:使用普通方法找出字串中所有數字

實現思路:要找出字串中的數字,其實也不難,使用判斷先將字串中的數字提取出來,那麼字串中肯定不止一個數字,所以就需要一個空字串來存儲提取出來的數字字符,然後再將這些數字字符添加到數組中,最後返回,這樣就完成了。來看看程式是怎麼實現的:

 <script>
 var str=&#39; abc d aa c zz -=-=s-&#39;;
 var arr=[];
 var num=&#39;&#39;;
 //首先循环遍历字符串
 for(var i=;i<str.length;i++){
   //再判断当前字符大于等于并且小于等于,则为数字
   if(str.charAt(i)>=&#39;&#39; && str.charAt(i)<=&#39;&#39;){
     //那么就将当前的字符存储在空字符串中
    num += str.charAt(i);
   }
   else{
     //如果字符串中有值。
     if(num){
       //将值添加到数组中。
       arr.push(num);
       //再清空字符串,避免重复添加。
       num=&#39;&#39;;
     }
   }
 }
 //最后在整个字符串结束之后有可能还会有数字,再做一次判断。
 if(num){
   //如果还有值就添加到数组中。
   arr.push(num);
   //再清空字符串。
   num=&#39;&#39;;
 }
 //返回:OK,现在返回就完成了。
 alert(arr); //返回:,,,,,,,
 </script>

雖然可以使用普通方法完成,結構清晰,但是代碼相對較長,如果使用正則,那麼一個表達式就完成了這麼多工作,非常方便,下面就來看看怎麼使用正規。

3、使用正規。

  正規表示式語法:var re = new RegExp('模式', '修飾符');

  模式就是表達式的模式,而修飾符是用來指定全域匹配、不區分大小寫等,完整形態就是正規表示式。

  看到正規語法長這模樣,不就是JS中典型的新創建對象的語法麼,對了,就是新創建一個正則對象。我們都知道,要盡量避免使用new關鍵字,使用new無疑就是新創建了一個對象,那麼同時就預示著其佔據了一定的內存空間,如果處理不當,積累多了會造成內存溢出,這樣相當耗費資源,不利於程式碼優化的實作。同時這樣的寫法,體現不出正則的強大,他應該是很簡a潔的才對,因此在實際使用的時候都不採用這種JS風格的正則語法,都使用的是另一種風格,如下:

  語法:var re = /模式/修飾符;

  這種風格就相對簡潔了,屬於一般人看不懂的表達方式。

  (1)、修飾符。

  修飾符用於執行全域匹配和區分大小寫。

  忽略大小寫:i (ignore的簡寫,中文翻譯為:忽略)

  全局匹配:g (global的簡寫,中文翻譯為:全部的/全局的)

 〜實例:全局搜尋指定〜

 <script>
 var str=&#39;AbCdEFgiX&#39;;
 //JS风格:
 //这个正则表达式什么也不代表,只代表abc本身。
 var reg=new RegExp(&#39;abc&#39;, &#39;i&#39;);
 alert(str.match(reg));  //返回:AbC
 //常用风格:
 var re=/efg/i;
 alert(str.match(re));  //返回:EFg
 </script>

4、方括號和元字元。

  (1)、方括號。

  方括號用於尋找某個範圍內的字元。

  ①、任意字元

  表達式:[abc]

  找出方括號中的任意字元。
  []在這裡為或的意思,即隨便出現哪個都行。


<script>
 var str=&#39;apc xpc ppc bpc spc opc&#39;;
 //[apx]pc,随便出现哪个都行,即:apc ppc xpc
 var re=/[apx]pc/g;
 alert(str.match(re));  //返回前个pc。
 </script>

   ②、范围查找。

  表达式:[0-9] [a-z] [A-z] [A-Z]

  [0-9]  查找任意 0 - 9 的数字。

  [a-z]  查找任意 a - z 的字符。

  [A-z]  查找任意 大写A - 小写z 的字符。

  [A-Z]  查找任意 大写A - 大写Z的字符。

  ③、排除查找。

  表达式:[^abc] [^a-z] [^0-9]

  [^abc]  查找任意不在方括号中的字符。

  [^a-z]  查找任意除了字母以外的字符,包括数字符号中文外文。

  [^0-9]  查找任意除了数字以外的字符,包括字母符号中文外文。

 <script>
 var str=&#39;ot out o.t o t o`t ot ot&#39;;
 //o和t中间除了数字,什么都可以
 var re=/o[^-]t/g;
 alert(str.match(re));  //返回:out,o.t,o t,o`t
 </script>

  ④、选择查找。

  表达式:(a|b|c)

  查找任何指定的选项,a或b或c。

  ⑤、匹配还可以使用组合模式,比如:[a-z0-9A-Z] [^a-z0-9]

  [a-z0-9A-Z]  任意大小写字母和数字。

  [^a-z0-9]  除了字母和数字以外,什么都可以。

  (2)、元字符。

  元字符是拥有特殊含义的字符,也可以叫做转义字符。

  下面是一些常用的元字符:


符、製表符、換行符和換頁符,不可顯示不可列印的字元。 /s/S找出非空白字元。
元字元 描述 使用
不建議使用,容易出問題。
w 查找單字字符,包括英文數字下劃線,相當於[a-z0-9] /w/非單字字符,相當於[^a-z0-9]
/W/ d /查找數字,相當於[0-9]
D 查找非數字,相當於[^0-9] /D/
/D/
/S/
b 查找位於單字的開頭或結尾的匹配,如果未匹配到,則傳回null。 /b/
B

查找非單字邊界的匹配,也就是不位於開頭或結尾,匹配位置的一個上

查找非單字邊界的類型是相同的開頭和結尾:匹配位置的上一個符號必須同為單詞,

或必須同為非單詞,

字符串的開頭和結尾處被視為非單詞字符,如果未匹配到,則返回null。 🎜🎜
/B/
n 查找換行符,如果找到則返回該位置,如果找不到則返回-1。 /n/ 
f 找換頁符。 /f/ 
r 找回車符。 /r/ 
t 查找製表符。

5、量詞。

  所謂量詞,就是數量詞,即個數,用在正則中,表示出現的次數。

  以下是一些常用的量詞:


量詞 描述 使用
或次🜎 不建議使用,範圍太廣,不夠精確。
? 零次或一次,相當於{0, 1} /10?/g 對1進行全局搜索,包括其後緊跟的零個或個或一個10?/g 對1進行全局搜索,包括其後緊接的零個或個或10? 0'。
+ 一次或任意次,相當於{1, } /w+/g 對至少一個單字進行全域搜尋。
{n} 正好n次 /d{4}/g 對包含四位數的數字進行全域搜尋。
{n,} 至少n次,最多不限 /d{3,}/g 對包含至少三位數的數字進行全域搜尋。
{n, m} 至少n次,最多m次  /d{3,4}/g 對包含全域或四位元的數字進行三位搜尋。

下面是一些常用的配對模式:


a$任何結尾為a 的字符,表示行尾?!a
模式 描述 使用
/^d/ 以數字開頭 / ^a/g 全域搜尋以'a'開頭的字符
/d$/ 以數字結尾 /z$/g 全域搜尋以'z'結尾的字元
?=a 任何其後跟任何其後跟任何其後接a(?= b)/g 全域搜尋'a'後面跟著'b'的字元
任何其後沒有緊跟a 的字符 任何其後沒有緊跟a 的字符 /c ?= d)/g 全域搜尋'c'後面沒有緊接'd'的字元
🎜

6、字符串和正则配合。

   (1)、search()配合正则

  实例:找出字符串中第一次出现数字的位置

 <script>
 var str=&#39;asdf  zxcvbnm&#39;;
 //元字符\d,表示转义为数字
 var re=/\d/;
 alert(str.search(re));  //返回: 第一个数字为出现在第位
 </script>

   (2)、match()配合正则

  其实没有什么东西是非正则不可的,只是正则可以让做东西更方便。下面就完成本章遗留的历史问题,怎么使用正则,能一句代码就完成普通方法需要很多行代码才能完成的东西。

  在实例之前,先看看match()与正则的配合。

<script>
 var str=&#39;asdf  zxcvm&#39;;
 //找出字符串中的数字可以使用元字符\d
 var re=/\d/;
 //没告诉系统要找多少数字,系统在找到数字后就返回
 alert(str.match(re));  //返回:
 //因此需要全局匹配,使用修饰符g
 var re=/\d/g;
 //没告诉系统要找几位,系统会将所有找到的数字返回
 alert(str.match(re));  //返回:,,,,,,,,,,,,
 //所以可以使用两个元字符,告诉系统要找的数字是位
 var re=/\d\d/g;
 //显然这样是不可取的,因为数字的位数并不固定,可能是位,有可能还是多位
 alert(str.match(re));  //返回:,,,,
 //所以需要用到量词+,+代表若干,也就是多少都可以。
 var re=/\d+/g;
 //现在返回正确。
 alert(str.match(re));  //返回:,,,,
 </script>

   实例:使用正则找出字符串中所有数字

 <script>
 var str=&#39; abc d aa c zz -=-=s-&#39;;
 //alert(str.match(/\d+/g));
 //元字符\d也可以使用[-]代替,到随便哪个都行。
 alert(str.match(/[-]+/g));  //返回:,,,,,,,
 </script>

  正则是强大的字符串匹配工具,就这样简单的使用一句代码就完成了。

  (3)、replace()配合正则

 <script>
 var str=&#39;abc zaaz deaxcaa&#39;;
 //将字符串中的a替换为数字
 alert(str.replace(&#39;a&#39;, ));  //仅仅只将第一个a替换为
 //配合正则使用匹配所有a再替换
 var re=/a/g;
 alert(str.replace(re, &#39;&#39;));  //返回所有的a都为
 </script>

   实例:简单的敏感词过滤

  所谓的敏感词,就是法律不允许的词语,一切非法词都可以叫做敏感词,这包括的范围就太广了,比如危害国家安全,反对宪法确立的基本原则,散步谣言,扰乱民心,扰乱社会秩序,破坏社会稳定,色情、暴力、赌博、虚假、侵害、骚扰、粗俗、猥亵或其他道德上令人反感的词,以及含有法律规定或禁止的其他内容的词语。在平时最常见也是大多数人都会用的词莫属道德上令人反感的词了,说斯文一点就是吵架时用于攻击别人的词语。这里就列举几个热门的网络词语作为例子。

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById(&#39;btn&#39;);
   var oTxt=document.getElementById(&#39;txt&#39;);
   var oTxt=document.getElementById(&#39;txt&#39;);
   oBtn.onclick=function (){
     //这里的|在正则中表示 或 的意思
     var re=/元芳|萌萌哒|然并卵|毛线|二货|城会玩/g;
     //文本框的值等于文本框的值过滤掉敏感词
     oTxt.value=oTxt.value.replace(re,&#39;***&#39;);
   };
 };
 </script>
 </head>
 <body>
 <textarea id="txt" rows="" cols=""></textarea><br>
 <input id="btn" type="button" value="过滤"><br>
 <textarea id="txt" rows="" cols=""></textarea>
 </body>
 </html>

  可在第一个文本框中输入一些相关语句,点击过滤按钮,查看过滤后的效果。

  此外,支持正则表达式的 String 对象的方法还包括 split() 方法,可把字符串分割为字符串数组。

7、RegExp对象方法。

  在JS中,RegExp对象是一个预定义了属性和方法的正则表达式对象。

  (1)、test()

  test() 方法用于检测一个字符串是否匹配某个模式,也就是检测指定字符串是否含有某个子串,如果字符串中含有匹配的文本,返回 true,否则返回 false。

  语法:RegExpObject.test(str)

  调用 RegExp 对象 re 的 test() 方法,并为它传递字符串str,与这个表示式是等价的:(re.exec(str) != null)。

  实例:搜索字符串是否含有指定的字符

 <script>
 var str=&#39;The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.&#39;;
 var re=/i/;
 alert(re.test(str));  //返回:true
 var reg=/z/;
 alert(reg.test(str));  //返回:false
 //上面的代码可以不用定义正则的变量,直接使用,将两行合并为一行。
 alert(/i/.test(str));
 alert(/z/.test(str));
 </script>

  (2)、exec()

  exec() 方法用于检索字符串中的正则表达式的匹配,提取指定字符串中符合要求的子串,该方法返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回 null。可以使用循环提取所有或者指定index的数据。

  语法:RegExpObject.exec(str)

  exec() 方法的功能非常强大,它是一个通用的方法,可以说是test() 方法的升级版,因为他不仅可以检测,而且检测到了可以直接提取结果。该方法使用起来比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

 <script>
 var str = &#39;good good study day day up&#39;;
 var re = /good/;
 var arr = re.exec(str);
 console.log(arr);  //控制台显示:["good"]点开后显示: "good",index ,input "good good study day day up"。
 console.log(arr.index);  //控制台显示:
 console.log(arr.input);  //控制台显示:good good study day day up
 </script>

  通过上面的实例,可以看到,如果 exec() 找到了匹配的文本,则返回一个结果数组。否则,返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话),以此类推。

  除了数组元素和 length 属性之外,exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看出,在调用非全局的 RegExp 对象的 exec() 方法时,返回的数组与调用方法 String.match() 返回的数组是相同的。 

  什么是"与子表达式相匹配的文本"?

  所谓的子表达式就是正则表达式中包含在圆括号中的内容。看下面实例:

 <script>
 var str = &#39;good good study day day up&#39;;
 var re = /g(o+)d/;
 var arr = re.exec(str);
 console.log(arr);  //显示:["good", "oo"]点开后显示: "good", "oo", index ,input: "good good study day day up"
 console.log(arr.length); //显示:
 var reg = /(o+)/;
 //var reg = /o+/;  只返回一个"oo",长度为
 var arr = reg.exec(str);
 console.log(arr);  //显示:["oo", "oo"]点开后显示: "oo", "oo", index ,input: "good good study day day up"
 console.log(arr.length); //显示:
 </script>

   通过上例,可以看到,子表达式是一个大的表达式的一部分,并且必须用()包含起来。一个表达式可使用多个子表达式,同时还支持多层嵌套,把一个表达式划分为多个子表达式的目的是为了把那些子表达式当作一个独立的元素来使用。也就是说表达式中的子表达式可以作为整个表达式返回,也可以作为一个单独的表达式返回。所以上面的数组长度为 2。

  使用子表达式是为了提取匹配的子字符串,表达式中有几个()就有几个相应的匹配字符串,顺序会依照()出现的顺序依次进行,并且()中可以使用 或"|" 进行多个选择。也就是说可以使用()对字符进行分组,并保存匹配的文本。

  如果该方法使用全局匹配,则找到第一个指定字符,并存储其位置,如果再次运行 exec(),则从存储的位置(lastIndex)开始检索,并找到下一个指定字符,存储其位置。lastIndex属性是RegExp对象属性,是一个整数,标示开始下一次匹配的字符位置。看下面实例:

 <script>
 var str = &#39;good good study day day up&#39;;
 var re = /good/g;
 var arr;
 do{
   arr = re.exec(str);
   console.log(arr);
   console.log(re.lastIndex);
 }
 while(arr !== null)
 /*
 结果如下:
 显示:["good"],点开后: "good", index , input "good good study day day up"。
 lastIndex为。
 显示:["good"],点开后: "good", index , input "good good study day day up"。
 lastIndex为。
 
 显示:null 
 lastIndex为。
 */
 </script>

   在调用非全局的 RegExp 对象的 exec() 方法时,返回的数组与调用 String.match() 返回的数组是相同的。但是,当 RegExpObject 是一个全局正则表达式时,exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。

  通过上面实例,可以看到,当第三次循环时,找不到指定的 "good",于是返回null,lastIndex值也变成0了。找到的第一个"good"的lastIndex值为4,是匹配文本最后一个字符的下一个位置。

<script>
 var str = &#39;good good study day day up&#39;;
 var re = /good/g;
 var arr;
 while((arr = re.exec(str)) != null){
   console.log(arr);
   console.log(re.lastIndex);
 }
 /*
 结果如下:
 显示:["good"],点开后: "good", index , input "good good study day day up"。
 lastIndex为。
 
 显示:["good"],点开后: "good", index , input "good good study day day up"。
 lastIndex为。
 */
 </script>

  这里需要注意,如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串(仍然使用旧的re),就必须手动地把 lastIndex 属性重置为 0。

  无论 RegExpObject 是否是全局模式,exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处,后者在全局模式下返回的信息要少得多。因此可以这么认为,在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。

  (3)、compile

  compile() 方法用于在脚本执行过程中编译正则表达式,也可用于改变和重新编译正则表达式。主要作用是改变当前(re)匹配模式。

  语法:RegExpObject.compile(模式, 修饰符)

  模式就是正则表达式,修饰符用于规定匹配的类型,g匹配全局,i忽略大小写,gi全局匹配忽略大小写。

  该方法是改变匹配模式时使用的,一般情况下,能用到的地方很少。

  实例:在全局中忽略大小写 搜索"day",并用 "天" 替换,然后通过compile()方法,改变正则表达式,用 "日" 替换 "Today" 或 "day"。

 <script>
 var str = &#39;Today is a beautiful day, Day day happy!&#39;;
 var re = /day/gi;
 var str = str.replace(re, &#39;天&#39;);
 console.log(str);  //输出:To天 is a beautiful 天, 天 天 happy!
 reg = /(to)?day/gi;
 reg.compile(reg); 
 str = str.replace(reg, &#39;日&#39;);
 console.log(str);  //输出:日 is a beautiful 日, 日 日 happy!
 </script>

8、正则应用。

  正则表达式也叫规则表达式,所以在编写时,和编写JS的流程一样,先虑再写。最重要的就是,要搞清楚他所要表达的规则,先仔细端详其外表,看他到底长的什么模样,也就是以什么样的格式存在,再根据这种格式去写表达式,看是否能达到我们预期的目的,如果未达到,其实一般情况下直接将格式描述成表达式,都不会达到预期的效果,好在我们的主框架已经有了,我们只需要知道是什么地方出错了,什么地方没有达到预期,就可以很简单的在这个框架基础上稍加修改,最后就是完美的表达式了。比如要写一个验证手机号的正则表达式,手机号大家都知道是11位,全部为数字,而且开头是1,紧跟着的2位,因为运营商不同,可有多种组合,后面8位是任意数字,所以我们就可以规定开头必须为1,后面2位根据各运营商提供的不同组合进行限定,最后再输入8位任意数字。这样主框架就算完成了,但是手机号也有特殊情况,比如移动给手机号码前边加上+86依然可以使用,必要的时候我们还需要把这种情况考虑进去,不然用户输入了自己的移动手机号给前边加了个+86,然后点击提及,系统 "啪" 弹出一个窗口,你输入的是毛线,系统不识别,这样就闹笑话了,所以再只需要对框架做出修改,把这种情况考虑进去,就大功告成了。

  这么说起来正则表达式貌似很简单的样子,其实挺难的,why are you so diao?归根结底就是这种一般人很难看懂的表达方式,自己当时写的时候很明白表达的是什么,过段时间回头,哎哟我去,怎么不认识了。其实这是一个熟能生巧的过程,记得有篇课文中写到“好记性不如烂笔头”,勤能补拙,多动手多写多思考,通过码海战术,反复推敲代码,让自己身经百战,见的多了,自然就不虚了,编程是一门艺术,精通任何一门艺术,都需要大量的练习和领悟,知识就是一个积累的过程,当然更重要的还是要自己去总结归纳,让知识真正属于自己。我觉着写程序这东西吧,最重要的还是思维,让代码始终跟着这种思维走,目的只有一个,怎么简单怎么省事怎么做,当然不是偷工减料,要明白需要什么,不需要什么,要呈现出什么样的效果,应该怎么去一步步实现,只要有这种实现目的的思维,就可以让代码始终保持着清晰简洁的状态,加快编写代码的效率,还有助于排错,也有利于代码的优化。那个好像扯太远了,每个人都有自己思考问题的方式,有不同的做事风格,只要最优化解决问题就好了,回到正事,接下来看看正则表达式应用的两个实例。

  (1)、正则验证QQ号。

  思路分析:QQ号有一个特性全部为数字,而且第一位不为0,那么就可以这样写/^[1-9]/,开头为1-9随便哪个数字,常见的QQ号最少的是5位数,最多的是10位数,那么可以使用量词{n,m}限定位数,表达式为/\d{5,10}/,这有一个小问题,前边我们已经限定了开头的第一位,那就说明还可以再输入至少4位,最多9位的数字,这样才匹配了最少5位最多10位,将表达式改为/\d{4,9}/,最后再限定结尾不能是非数字,就完事了。下面看代码是怎么完成的:

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 window.onload = function (){
   var oBtn = document.getElementById(&#39;btn&#39;);
   oBtn.onclick = function (){
     var oTxt = document.getElementById(&#39;txt&#39;).value;
     var re=/^[-]\d{,}$/;
     //用定义的正则表达式检测输入框的值是否匹配。
     if(re.test(oTxt)){  
       alert("格式正确");
     }
     else{
       alert(&#39;输入错误&#39;);
     }
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text" placeholder="请输入QQ">
 <input id="btn" type="button" value="验证">
 </body>
 </html>

  (2)、正则验证邮箱。

  思路分析:先端详下邮箱的外表,随便来个abc123_@ss789.xyz,邮箱是典型的粗俗的分析下其结构组成,大致可分为五部分,第一部分若干字母、若干数字还有一个下划线,第二部分是一个@,第三部分又是若干字母、若干数字,第四部分是一个点,最后一部分又是若干字母,诶、邮箱长的好复杂,各种若干。现在我们看光了邮箱的模样,清楚了邮箱的规则,就可以使用表达式描述了,第一部分可写为/\w+/,表示若干英文,第二部分就采用@,第三部分可表达为[a-z0-9]+,若干字母数字都可以,第四部分需要注意,点在正则中代表任意字符,如果想直接显示为点,就需要使用转义,就写为\.,最后一部分若干英文,表达为[a-z]+,这样就用正则的规则把邮箱的规则描述完了,最后再使用忽略大小写,将格式整理下:/\w+@[a-z0-9]+\.[a-z]+/  下面就用我们分析的表达式直接验证一下:

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-">
   <title>JavaScript实例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById(&#39;btn&#39;);
   var oTxt=document.getElementById(&#39;txt&#39;);
   oBtn.onclick=function (){
     var re=/\w+@[a-z-]+\.[a-z]+/i;
     if(re.test(oTxt.value)){
       alert(&#39;合法邮箱&#39;);
     }
     else{
       alert(&#39;非法邮箱&#39;);
     }
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text" placeholder="请输入邮箱">
 <input id="btn" type="button" value="验证">
 </body>
 </html>

  将我们上面用于分析的邮箱例子abc123_@ss789.xyz拿来检测,OK,合法邮箱,这就没问题了吗?我们再来验证下这个邮箱:正则abc123_@ss789.xyz校验,OK,还是合法邮箱,这邮箱看着都不正规,跟我们之前分析的邮箱样子,长的从本质上都不一样,正则怎么会判断合法呢?这不是我们要的效果,显然是我们的表达式有点小问题,就像之前说的,一般情况下直接将格式描述成表达式,都不会达到预期的效果,那怎么解决呢?先开分析下是什么原因导致的,其实因为正则对象方法test()造成的,该方法有一个特性:只要这个字符串其中的一部分符合要求,就返回true。解决方法其实也很简单,让整个字符串都被正则检测,而不只是检测一部分,所以再加上行首行尾就OK了。其实熟练了正则之后,像这样的小问题,一般也不可能出现,这里的注重点是思路,要养成一种编写代码的思维模式。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-">
 <title>JavaScript实例</title>
 <script>
 window.onload=function (){
   var oBtn=document.getElementById(&#39;btn&#39;);
   var oTxt=document.getElementById(&#39;txt&#39;);
   oBtn.onclick=function (){
     var re=/^\w+@[a-z-]+\.[a-z]+$/i;
     if(re.test(oTxt.value)){
       alert(&#39;合法邮箱&#39;);
     }
     else{
       alert(&#39;非法邮箱&#39;);
     }
   };
 };
 </script>
 </head>
 <body>
 <input id="txt" type="text" placeholder="请输入邮箱">
 <input id="btn" type="button" value="验证">
 </body>
 </html>

现在对刚才的2个邮箱再次验证,第一个合法,第二个非法,这个正则验证邮箱的表达式就没问题了。其实还是不够严谨,现在网站大多要填邮箱的地方,邮箱的服务器地址也就是后缀名如@qq.com等都提供了下拉列表,可供用户选择,如果是需要整个邮箱都自行输入,那么这个正则表达式问题就来了,邮箱的后缀名可以分为几类,其第三部分和最后一部分都是固定的格式,如果使用该表达式验证,那事就大了,因为我们给每一部分定义的都是可输入若干,很显然这是非法的格式,邮箱的后缀是需要做限定的,这里只是简单的做一个实现思路的分析,在真正用的时候,还需要具体问题具体对待。像这种需要验证的东西,前端不可能做到完美,前端就算写的再严谨,也是很容易出问题的,所以这是属于后端干的事,但是前端可以对用户的输入做一个简单的格式验证,只有确保用户输入正确了,再配合后端,那就是事半功倍的。

PS:RegExp几个常用方法说明

1、Test()

RegExpObject.test(string)

判断string中是否有与表达式匹配的字符串,有则返回true,否则返回false
例如

var patt1=new RegExp("e");    
document.write(patt1.test("The best things in life are free"));

 
由于该字符串中存在字母 "e",以上代码的输出将是:true

2、exec()

RegExpObject.exec(string)
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

例如

JScript 代码 

var str= "cat2,hat8" ;
var reg=/c(at)\\d/ ; 有分组
console.info(reg.exec(str));//运行返回  ["cat2", "at"]

3、Match()

string.match(RegExpObject)
它和exec有类似,也是返回一个数组,但它们有区别。
区别1:如下如果正则中有g,则match返回所有匹配。而exec永远只返回与第一个匹配有关的信息。
区别2:如果没有g,但是有分组,则两个结果一样。或者没有g也没有分组。只返回第一个匹配。

实例

JScript 代码

var someText= "web2.0 .net2.0" ;
var pattern=/(\\w+)(\\d)\\.(\\d)/g;
var outCome_exec=pattern.exec(someText); ["web2.0","web","2","0"]
var outCome_matc=someText.match(pattern); ["web2.0","net2.0"]

4、Search()

stringObject.search(regexp)

返回第一个匹配的起始位置。

5、Replace()

stringObject.replace(regexp/substr,replacement)


返回新替换过后的新字符串。
如果是字符串,替换第一个。如果是正则表达式中有g,则全部替换,否则也是一个。

例如

JScript 代码

function fn() { 
for(var i = 0;i < arguments.length;i++){
alert("第"+(i+1)+"个参数的值:"+arguments[i]);
} 
} 
var str = &#39;<p id="{wo}" >{ni}</p>&#39;; 
str.replace(/\\{([a-z]+)\\}/ig, fn);

 6、Split()

stringObject.split(separator,howmany)


第一个参数是字符串或者正则表达式,从它开始分解字符串。第二个参数表示返回数组的最大长度。

例如 

JScript 代码 

var str= "cat2,hat8" ;
var reg=/at/ ;
console.info(str.split(reg));
["c", "2,h", "8"]
console.info(str.split(reg,2));
["c", "2,h"]

7、compile()

compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式,也可以添加或删除第二个参数。

例如 

JScript 代码

var patt1=new RegExp("e");  
document.write(patt1.test("The best things in life are free"));  
patt1.compile("d");  
document.write(patt1.test("The best things in life are free"));

8、关于$0~$99的例子

JScript 代码

var str="alert.login.verifyfailed=Your email or password is incorrect!";
var reg=/^alert.\\w*(.\\w*)=((?:\\w*[ !\\.])*)$/;
var out=str.match(reg);
console.info($0);

9、测试RegExp属性

JScript 代码 

function demo(){
  var str = "abcdd abcsszabcdddccabAbcddABCEE";
  var regex = /a(bc)/gi;
  var t = null;
  while(t = regex.exec(str)){
    var result = "index = " + t.index + ", match = " + t[0] + ", group = " + t[1];
    result += "/n$1=" + RegExp.$1 + ", lastMatch=" + RegExp.lastMatch + ", leftContext=" + RegExp.leftContext;
    alert(result);
  }
}


以上就是JavaScript,学习小结, RegExp的内容,更多相关内容请关注PHP中文网(www.php.cn)!



陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用