Mistj's Digital Garden

Appearance

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), '****')