JavaScript中使用正則表達式

時間 2019-12-20

原文原文鏈接

JavaScript中正則表達式的使用

建立正則對象

RegExp 對象是帶有預約義屬性和方法的正則表達式對象。方式一：javascript

var reg = new RegExp("\d", 'i');

方式二：html

var reg = /\d/i;

參數

標誌	說明
i	忽略大小寫
g	全局匹配
gi	全局匹配+忽略大小寫

正則匹配

test() 是一個正則表達式方法。java
它經過模式來搜索字符串，而後根據結果返回 true 或 false。jquery

// 匹配日期
var dateStr = "2019-09-10";
var reg = /^\d{4}-\d{2}-\d{2}$/;
console.log(reg.test(dateStr));

匹配正則表達式

console.log(/\d/.test("998"));//true
console.log(/\d*/.test("998"));//true
console.log(/\d+/.test("998"));//true
console.log(/\d{0,}/.test("998"));//true
console.log(/\d{2,3}/.test("998"));//true
console.log(/\D/.test("eat"));//true
console.log(/\s/.test(" "));//true
console.log(/\S/.test("嘎嘎"));//true
console.log(/\w/.test("_"));//true
console.log(/\W/.test("_"));//true

正則表達式案例

驗證ip地址git
驗證密碼強弱正則表達式
驗證手機號是否合法安全

var ipStr = "192.168.102.103";
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
console.log(reg.test(ipStr))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>passwordCheck</title> 
<script type="text/javascript" src="Js/jquery1.6.1.js"></script> 
<script type="text/javascript"> 
   $(function() { 
       $('#pwd').keyup(function() { 
           var val = $(this).val(); 
           isDigit(val); 
       }); 
           
       function isDigit(s) { 
           var pattern_d = /^\d+$/;           //全數字 
           var pattern_s = /^[A-Za-z]+$/       //全字符 
           var pattern_w = /^\w+$/;           //數字或者字符 
           var pattern_W = /^\W+$/             //全非數字也非字符 
           var pattern_r = /^\w+\W+[\w\W]*\w+$/   //以字母或者數字開頭結尾的字符串 
           var html = ''; 
           var x = 0; 
           var y = 0; 
               
           $('#user').html(s); 
           if(pattern_W.exec(s)) { 
               html += '非數字也非字符<br />'; 
               x = 0; 
               y = 0; 
           } 
           if(pattern_w.exec(s)) { 
               html += '數字或者字符<br />'; 
               y = 1; 
           } 
           if(pattern_d.exec(s)) { 
               html += '全數字<br />'; 
               x = 1; 
               y = 0; 
           } 
           if(pattern_s.exec(s)) { 
               html += '全字符<br />'; 
               x = 2; 
               y = 0; 
           } 
           if(pattern_r.exec(s)) { 
               html += '以字母或者數字開頭結尾的字符串<br />'; 
               x = 3; 
               y = 2; 
           } 
           if( y === 0 && x === 0) { 
               html += '密碼格式錯誤<br />'; 
           } 
           if( x > 0 && y === 0) { 
               html += '安全級別《低》<br />'; 
           } 
           if( x === 0 && y === 1) { 
               html += '安全級別《中》<br />'; 
           } 
           if( y === 2) { 
               html += '安全級別《高》<br />'; 
           } 
           html += x + '<br />' + y; 
           $('#password').html(html); 
       }; 
   }); 
</script> 
</head> 
   
<body> 
<form action="#" method="#"> 
   用戶名：<input type="text" name="" /><span id="user"></span><br /> 
   密碼：<input type="password" name="" id="pwd" /><span id="password"></span><br /> 
</form> 
</body> 
</html>

var phoneNumStr = "15897808512";
var reg = /^1[3456789]\d{9}$/;
console.log(reg.test(phoneNumStr));

正則提取

search

方法使用表達式來搜索匹配，而後返回匹配的位置。函數

var str = "Visit W3School!"; 
var n = str.search("W3School");
// var n = str.search(/W3School/);
console.log(n)

match

方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。ui

var peopleStr = "張三：1000， 李四：5000， 王五：8000";
var array = peopleStr.match(/\d+/g);
console.log(array);

分組

var dateStr = '2016-1-5';
// 正則表達式中的()做爲分組來使用，獲取分組匹配到的結果用Regex.$1 $2 $3....來獲取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}

正則替換

replace替換與正則表達式匹配的子串。this

var str="Visit Microsoft!";
document.write(str.replace(/Microsoft/, "W3School"));

案例：表單驗證

QQ號：<input type="text" id="txtQQ"><span></span><br>
郵箱：<input type="text" id="txtEMail"><span></span><br>
手機：<input type="text" id="txtPhone"><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>

var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var txtName = document.getElementById("txtName");

txtQQ.onblur = function() {
    // 獲取當前的文本框對應的span
    var span = this.nextElementSibling;
    var reg = /^\d{5,10}$/;
    // 判斷是否成功
    if(!reg.test(this.value)){
        // 驗證不成功
        span.innerText = "請輸入正確的QQ號";
        span.style.color = "red";
   }else{
        // 驗證成功
        span.innerText = "";
        span.style.color = "";
   }
};

// txtPhone
txtPhone.onblur = function() {
    var span = this.nextElementSibling;
    var reg = /^1[3456789]\d{9}$/;
    if(!reg.test(this.value)){
        // 驗證不成功
        span.innerText = "請輸入正確的手機號";
        span.style.color = "red";
   }else{
        span.innerText = "";
        span.style.color = "";
   }     
};

封裝成函數：

var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheckBirthday(txtBirthday, regBirthday, "請輸入正確的出生日期：");
function addCheckBirthday(element, reg, tip) {
    element.onblur = function() {
      // 獲取當前的文本框對應的span
        var span = this.nextElementSibling;
       // 判斷驗證是否成功
        if(!regBirthday.test(this.value)){
            // 驗證不成功
            span.innerText = tip;
            span.style.color = "red";
       }else{
            // 驗證成功
            span.innerText = "";
            span.style.color = "";
       }   
   };
}

經過元素增長自定義驗證屬性對錶單進行驗證

<form id="frm">
  QQ號：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
  郵箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
  手機：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
  生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
  姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>

// 全部的驗證規則
var rules = [
 {
    name: 'qq',
    reg: /^\d{5,12}$/,
    tip: "請輸入正確的QQ"
 },
 {
    name: 'email',
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "請輸入正確的郵箱地址"
 },
 {
    name: 'phone',
    reg: /^\d{11}$/,
    tip: "請輸入正確的手機號碼"
 },
 {
    name: 'date',
    reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
    tip: "請輸入正確的出生日期"
 },
 {
    name: 'cn',
    reg: /^[\u4e00-\u9fa5]{2,4}$/,
    tip: "請輸入正確的姓名"
 }];

addCheck('frm');
//給文本框添加驗證
function addCheck(formId) {
  var i = 0,
      len = 0,
      frm =document.getElementById(formId);
  len = frm.children.length;
  for (; i < len; i++) {
    var element = frm.children[i];
    // 表單元素中有name屬性的元素添加驗證
    if (element.name) {
      element.onblur = function () {
        // 使用dataset獲取data-自定義屬性的值
        var ruleName = this.dataset.rule;
        var rule =getRuleByRuleName(rules, ruleName);

        var span = this.nextElementSibling;
        //判斷驗證是否成功
        if(!rule.reg.test(this.value) ){
          //驗證不成功
          span.innerText = rule.tip;
          span.style.color = "red";
       }else{
          //驗證成功
          span.innerText = "";
          span.style.color = "";
       }
     }
   }
 }
}

// 根據規則的名稱獲取規則對象
function getRuleByRuleName(rules, ruleName) {
  var i = 0,
      len = rules.length;
  var rule = null;
  for (; i < len; i++) {
    if (rules[i].name == ruleName) {
      rule = rules[i];
      break;
   }
 }
  return rule;
}