前端常用正则

204 阅读1分钟

先说明下正则的一些基本定义

  • 正则写法分为字面量 / … /  和 new RegExp(“^...”) 两种写法,量级大时建议使用 new写法

正则的 与 或 非

我们先虚拟两个表达式PatternA和PatternB,分别校验条件A和条件B

  • 匹配字符串同时满足条件A和条件B
(?=PatternA)PatternB
  • 匹配字符串满足条件A,但不可满足条件B
(?!PatternB)PatternA
  • 匹配字符串或者满足条件A或者满足条件B
(PatternA|PatternB)

常用正则实例

  1. 校验密码为 6-12位字母,数字或下划线
(/^(\w){6,12}$/.test(value))  == true
  1. 替换富文本里的图片标签,加入样式
content.replace(/\<img/gi,'<img style="width:100%;height:auto;"')
  1. 车牌号检验(包含新能源车牌)
let express = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/


result = express.test(licensePlate);

4. 校验中文字符(length 限制长度)

//校验中文字符

function testCEText(data, length) {

    let reg = new RegExp("^[\\u4e00-\\u9fa5a-zA-Z]{1," + length + "}$", "g");

    return reg.test(data)

}

// 只能是中文字符

function testCEText(data) {

    let reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");

    return reg.test(data)

}

5. 校验英文、数字、符号


function testEntext(data, length) {

    let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{1,1}$/;

    return reg.test(data)

}

6. 是否数字


function isNumber(value) {

    return /^\d+(\.\d+)?$/.test(value);

}

7.是否图片地址


const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;

function isImageUrl(url) {

  return IMAGE_REGEXP.test(url);

}
  1. 将img 标签的 style 样式替换掉

this.item.content = this.item.content.replace(/<img[^>]*>/gi,function(match,capture){

   var match = match.replace(/style=\"(.*)\"/gi, '');

    return match;

});
  1. 校验英文和数字的混合

function istrue(str){

    let reg=/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i;

    return reg.test(str);

}
  1. 校验英文或者数字

function testEnNumtext(str){

    let reg=/^[a-zA-Z0-9]+$/;

    return reg.test(str);

}

11. 校验价格(整数或保留两位小数)


function tt (price) {

    let priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;

    return priceReg.test(price);

}

12. 校验手机号


function testPhoneNumber (num) {

     let reg = /^1[3456789]\d{9}$/;

     return reg.test(num);

}

13. 检验身份证


function testIdCard (num) {

    let reg =  /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;

    return reg.test(num);

}

14 将字符串用 空格和换行符切割


a.split(/[\s]/)  // 按照空格切割

a.split(/[\n]/)  // 按照换行符切割

a.split(/[\s\n]/) // 按照空格和换行符切割

15 替换最后的冒号后面


let t = "20:30:44";

t = t.replace(/:\d{1,2}$/, ' ‘)

// 输出 t = “20:30"

16 正则匹配将字符串里的str1.str2.str3和str2.str3形式的字段str3加粗显示


let matchStr = (str) => { // 正则匹配将字符串里的str1.str2.str3和str2.str3形式的字段str3加粗显示

  const temp = str.replace(new RegExp(/(?!([\d\w])+\.([\d\w]+)+\.([\d\w]+))(([\d\w])+\.([\d\w]+))/g), (mStr) => {

    const strArr = mStr.split('.');

    let frontStr = '';

    if (strArr.length === 2) {

      frontStr += strArr[0] + '.';

    } else {

      frontStr += strArr[0] + '.' + strArr[1] + '.';

    }

    const resStr = strArr[strArr.length - 1];

    return `${frontStr}<strong>${resStr}</strong>`;

  });

  return temp;

};