Skip to content

JS相关的正则函数

相关函数:

  • match
  • test
  • replace
  • search
  • exec

match

  • 可在字符串内检索指定的值

  • 或找到一个或多个正则表达式的匹配

    • 有 g , 表示匹配多个
    • 没有 g ,仅匹配一个 (匹配结果可以直接用 == 和字符串进行比较)
    js
    var str = "你好,请问您是{姓名}{sex}本吗?";
    // 非全局模式
    result = str.match(/{([a-zA-Z0-9\u4e00-\u9fa5])+}/);
    console.log(result) // 只返回一个结果
    
    var str = "The rain in AIN SPAIN stays mainly in the plain";
    var n = str.match(/ain/g);  // [ '{姓名}', '{sex}' ]
    console.log(n) // 返回结果数组 [ 'ain', 'ain', 'ain' ]
    
    // 匹配大小写
    var str1="The rain in SPAIN stays mainly in the plain";
    var n1 = str.match(/ain/gi);
    console.log(n1)
    
    // 匹配userAgent
    //var ua = window.navigator.userAgent.toLowerCase();
    var ua = 'micromessenger';
    console.log(ua.match(/MicroMessenger/i));
    console.log(typeof ua.match(/MicroMessenger/i)); // object
    console.log(ua.match(/MicroMessenger/i) === "micromessenger"); // false
    console.log(ua.match(/MicroMessenger/i) == "micromessenger" ); // false
    var str = "你好,请问您是{姓名}{sex}本吗?";
    // 非全局模式
    result = str.match(/{([a-zA-Z0-9\u4e00-\u9fa5])+}/);
    console.log(result) // 只返回一个结果
    
    var str = "The rain in AIN SPAIN stays mainly in the plain";
    var n = str.match(/ain/g);  // [ '{姓名}', '{sex}' ]
    console.log(n) // 返回结果数组 [ 'ain', 'ain', 'ain' ]
    
    // 匹配大小写
    var str1="The rain in SPAIN stays mainly in the plain";
    var n1 = str.match(/ain/gi);
    console.log(n1)
    
    // 匹配userAgent
    //var ua = window.navigator.userAgent.toLowerCase();
    var ua = 'micromessenger';
    console.log(ua.match(/MicroMessenger/i));
    console.log(typeof ua.match(/MicroMessenger/i)); // object
    console.log(ua.match(/MicroMessenger/i) === "micromessenger"); // false
    console.log(ua.match(/MicroMessenger/i) == "micromessenger" ); // false

exec

  • 在非全局模式下,exec的表现和match一致

    • 全局模式下,exec可以多次执行,每次执行返回的结果同match函数。并且会在正则对象下记录lastIndex位置,当匹配不上时返回null并且lastIndex记录为0
    js
    var reg = new RegExp("{\[a-zA-Z0-9\\u4e00-\\u9fa5\]+}");
    var str = "你好,请问您是{姓名}{sex}本吗?";
    console.log(reg.exec(str))
    
    console.log("====global====")
    // 全局模式
    var reg = new RegExp("{\[a-zA-Z0-9\\u4e00-\\u9fa5\]+}","g");
    var str = "你好,请问您是{姓名}{sex}本吗?";
    let m = null;
    while( (m = reg.exec(str)) != null){
    console.log(m);
    console.log(reg.lastIndex);
    }
    console.log(reg.lastIndex);
    var reg = new RegExp("{\[a-zA-Z0-9\\u4e00-\\u9fa5\]+}");
    var str = "你好,请问您是{姓名}{sex}本吗?";
    console.log(reg.exec(str))
    
    console.log("====global====")
    // 全局模式
    var reg = new RegExp("{\[a-zA-Z0-9\\u4e00-\\u9fa5\]+}","g");
    var str = "你好,请问您是{姓名}{sex}本吗?";
    let m = null;
    while( (m = reg.exec(str)) != null){
    console.log(m);
    console.log(reg.lastIndex);
    }
    console.log(reg.lastIndex);

test

js
var str = "The rain in AIN SPAIN stays mainly in the plain";
let reg = /ain/;
var n = reg.test(str);
console.log(n, reg.lastIndex); // true  0 【因为没有带g,这里lastIndex不生效,为0】

let regGlobal = /ain/g;
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  8
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  32
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  47
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // false  0
var str = "The rain in AIN SPAIN stays mainly in the plain";
let reg = /ain/;
var n = reg.test(str);
console.log(n, reg.lastIndex); // true  0 【因为没有带g,这里lastIndex不生效,为0】

let regGlobal = /ain/g;
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  8
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  32
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // true  47
n = regGlobal.test(str);
console.log(n, regGlobal.lastIndex); // false  0

replace

需要特别注意,replaceAll 函数可实现字符串替换,但是它有浏览器版本限制的。 低版本浏览器上不支持此函数。使用replace替代是比较稳妥的方案
具体见 String.prototype.replaceAll() - JavaScript | MDN

  • 替换字符串

  • 不带g则只替换第一个遇到的字符

  • 不改变原来的字符串,返回新字符串

    js
    var text = '12345学习12学习345'
    var replaced = text.replace(/学习/g,'学霸')
    console.log(replaced) // 12345学霸12学霸345
    
    replaced = text.replace(/\d+/g, 'A');
    console.log(replaced); // A学习A学习A
    var text = '12345学习12学习345'
    var replaced = text.replace(/学习/g,'学霸')
    console.log(replaced) // 12345学霸12学霸345
    
    replaced = text.replace(/\d+/g, 'A');
    console.log(replaced); // A学习A学习A
  • $$ 插入一个 "$"。

  • $& 插入匹配的子串,也就是可以在保留原有匹配内容的情况下新增字符

  • $上点 插入当前匹配的子串左边的内容。

  • $' 插入当前匹配的子串右边的内容。

  • $n 正则中的捕获组,

    • $1代表第一个捕获组。正则需要匹配的东西
    • 需要用括号括起来
    • n从0开始
    js
    var text = '12345学习12学习345'
    var replaced = text.replace(/学习/g,'$$')
    console.log(replaced) // 12345$12$345
    
    replaced = text.replace(/学习/g,'xx$&xx')
    console.log(replaced) // 12345xx学习xx12xx学习xx345
    
    replaced = text.replace(/学习/g,'始$`终')
    console.log(replaced) // 12345xx学习xx12xx学习xx345
    
    replaced = text.replace(/学习/g,"始$'终")
    console.log(replaced) // 12345始12学习345终12始345终345
    
    replaced = text.replace(/(学习)/g,"【$1强国】")
    console.log(replaced) // 12345始$1终12始$1终345
    
    var name = '"a", "b"';
    replaced = name.replace(/"([^"]*)"/g, "'$1'");
    console.log(replaced)
    var text = '12345学习12学习345'
    var replaced = text.replace(/学习/g,'$$')
    console.log(replaced) // 12345$12$345
    
    replaced = text.replace(/学习/g,'xx$&xx')
    console.log(replaced) // 12345xx学习xx12xx学习xx345
    
    replaced = text.replace(/学习/g,'始$`终')
    console.log(replaced) // 12345xx学习xx12xx学习xx345
    
    replaced = text.replace(/学习/g,"始$'终")
    console.log(replaced) // 12345始12学习345终12始345终345
    
    replaced = text.replace(/(学习)/g,"【$1强国】")
    console.log(replaced) // 12345始$1终12始$1终345
    
    var name = '"a", "b"';
    replaced = name.replace(/"([^"]*)"/g, "'$1'");
    console.log(replaced)

Tip

此外需要注意,replace的第二个参数是支持函数的 ,例如如下代码:

js
"1230000".replace(/0+$/, function (match) {
  return '_'.repeat(match.length);
})
//result: 123____
"1230000".replace(/0+$/, function (match) {
  return '_'.repeat(match.length);
})
//result: 123____
  • 不区分全局模式
  • 如果匹配成功,则返回正则表达式在字符串中首次匹配项的索引;否则,返回-1

使用举例-两位小数校验

参考: js正则保留2位小数_harmsworth2016的博客-CSDN博客_js正则数字或两位小数

js
const validateNum = (num) => {
  let reg = /^([0]|([1-9][0-9]*)|(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/
  if (!reg.test(num)) {
    return num + ':只能输入正数或零';
  }
  reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
  if (!reg.test(num)) {
    return num + ':请保留2位小数';
  }
  return num + ':格式正确';
}
console.log(validateNum('00'))
console.log(validateNum('01'))
console.log(validateNum(''))
console.log(validateNum('a'))
console.log(validateNum('1.234'))
console.log(validateNum('2.1'))
console.log(validateNum('1.00'))
console.log(validateNum('2'))
console.log(validateNum('-2.123'))
console.log(validateNum('-2.12'))
const validateNum = (num) => {
  let reg = /^([0]|([1-9][0-9]*)|(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/
  if (!reg.test(num)) {
    return num + ':只能输入正数或零';
  }
  reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
  if (!reg.test(num)) {
    return num + ':请保留2位小数';
  }
  return num + ':格式正确';
}
console.log(validateNum('00'))
console.log(validateNum('01'))
console.log(validateNum(''))
console.log(validateNum('a'))
console.log(validateNum('1.234'))
console.log(validateNum('2.1'))
console.log(validateNum('1.00'))
console.log(validateNum('2'))
console.log(validateNum('-2.123'))
console.log(validateNum('-2.12'))

/^ ( [0]|([1-9][0-9]*) | ()$/说明:
- [0]|([1-9][0-9]*)可以是 0 或者 非 0开头纯证书
- ([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})) 0开头的小数, {1,}表示支持匹配1-无限次

实际举例-字符串脱敏

使用replace函数

js
// 方法1
var phone = '18801333333';
var reg = /^(\d{3})\d{4}(\d{4})/;
var newPhone = phone.replace(reg,'$1****$2');
console.log(newPhone);

// 方法2
let phonenumber = number.replace(number.phonenumber.substring(3,7), '****')
// 方法1
var phone = '18801333333';
var reg = /^(\d{3})\d{4}(\d{4})/;
var newPhone = phone.replace(reg,'$1****$2');
console.log(newPhone);

// 方法2
let phonenumber = number.replace(number.phonenumber.substring(3,7), '****')