前端学习笔记-正则表达式

时间  2021-08-12
标签 html 正则表达式 数组 markdown app 函数 工具 oop post 测试 栏目 正则表达式 繁體版
原文   原文链接

相关符号的含义

图片总结

image.png

image.png

正则表达式的组成

let reg = /pattern/flags;
复制代码

其中pattern(模式)是正则表达式的主体。flags(标记)，用于控制正则表达式的行为。flags的取值有如下几种html

  • g：全局模式，表示查找字符串的所有内容，而不是找到第一个匹配的内容就结束。
  • i：不区分大小写，表示在查找匹配时忽略pattern和字符串的大小写。
  • m：多行模式，表示查找到一行文本末尾时会继续查找。
  • y：粘附模式，表示只查找从1astIndex开始及以后的字符串。
  • u：Unicode模式，启用Unicode匹配。
  • s:dotA11模式，表示元字符.匹配任何字符(包括\n或\r)。

从这里能够看出，前边图中说元字符.匹配除换行符以外的任何字符是不许确的。若是加上s标志，则能够匹配任意字符正则表达式

元字符

元字符共有14个，在使用的时候须要加上\进行转义 {}[]()^$\|?*+.数组

中括号[]

  • [-.]表示符号-或者.号(注意这里，在[]中的.号表明的就是这个符号，可是若是在其外面，表示个匹配全部。 因此若是不在[]之中，想要匹配'.'，就要经过转意符号.)
  • 在[]中，特殊字符不须要转义，能够直接使用，好比[.()],可是在外面，是须要转义的( .等
  • []中的^标识非，[]外的^标识开头标识
  • [abc]表示a或者b或者才，但/abc/表示连续的abc字符
  • 在分组中表示或的方式(a|b),a或者b，对应[ab]
  • []中须要进行转义的字符有[]^-，其余的元字符不须要转义便可使用

关于\b

可参考 正则表达式之 \bmarkdown

  • \b 匹配这样的位置：它的前一个字符和后一个字符不全是(一个是,一个不是或不存在) \w。
  • 换一种说法就是：它的前一个“显式位置”字符和后一个“显式位置”字符不全是 \w。

RegExp和String相关的正则操做

test

  • 属于正则的方法，判断一个字符串是否符合正则表达式的约束
  • 用法如reg.test(str)返回值只多是false或者true

exec

  • 属于正则的方法，找出字符串中符合该正则的片断
  • 用法如reg.exec(str)返回一个数组，数组的长度大于等于1，第一项是匹配的片断，若是正则里有分组()，则该数组从第二项依次是是 1 , 1, 2,...分组匹配到的内容
const str = '1234';
const reg1 = /\d{1}(\d{1})/g;//带有g表示匹配字符串中的全部片断
console.log(reg1.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg1.exec(str));//["34", "4", index: 2, input: "1234", groups: undefined]
console.log(reg1.exec(str));//null

const reg2 = /\d{1}(\d{1})/;//不带g，表示匹配到第一个知足的片断，就再也不继续匹配
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
复制代码

须要注意带有标识g和不带标识g，exec会有不同的特性app

match

  • 属于字符串的方法，找出字符串中符合该正则的片断，和exec相似
  • 用法如str.match(reg)返回一个数组，须要注意g标识的区别
const str = '1234';
const reg1 = /\d{1}(\d{1})/g;
const reg2 = /\d{1}(\d{1})/;
console.log(str.match(reg1));//["12", "34"]
console.log(str.match(reg2));//["12", "2", index: 0, input: "1234", groups: undefined]
复制代码

replace

  • 属于字符串的方法，对字符串中正则匹配到的片断进行替换操做
  • 用法如str.repalce(reg, param)返回一个新的字符串。param第二个参数能够是一个字符串，或者一个返回替换内容的函数。

split

  • 属于字符串的方法，按照一个正则表达式的匹配，将字符串拆分为数组
  • 用法如str.split(param)返回一个数组。param第二个参数能够是一个字符串，或者一个正则表达式。

关于replace的匹配细节

const str = '1335555666617788884444';
const reg1 = /(?<=\d{3})\d{4}(?=\d{4})/g;
const reg2 = /(?<=\d{3})\d{4}(?=\d{4})/;
console.log(str.match(reg1));//"["5555", "6666", "1778"]"
console.log(str.replace(reg1,'****'));//"133************8884444"
console.log(str.replace(reg2,'****'));//"133****666617788884444"
复制代码

replace要替换的内容，和str.match(reg)匹配到的内容是对应的。而str.match(reg)和reg.exec(str)效果又是类似的。函数

能够从如下例子看出匹配过程工具

const str = '1335555666617788884444';
const reg1 = /(?<=\d{3})\d{4}(?=\d{4})/g;
let match;
console.log(reg1.lastIndex);//0
while(match !== null){
    match = reg1.exec(str);
    //每次进行一个exec，reg1的lastIndex会响应的增长，
    //增长的值等于，匹配到的字符的位置+匹配字符的长度
    console.log(match);//会打印出每次exec的匹配项
    console.log(match && match.index, reg1.lastIndex);
    //macth是匹配项在目标字符串str中的索引值
    //reg1.lastIndex表示下一次匹配将从这个索引值的位置开始
}
复制代码

打印结果以下oop

image.png

由此能够得出结论。post

  • 1335555666617788884444最早被匹配到的内容是5555,字符串被替换为133****666617788884444这时，reg的lastIndex值再也不为0，变为7，下一次匹配会从索引值为7的位置继续匹配。
  • 匹配到6666，替换为****，reg的lastIndex值变为11;匹配到1778，reg的lastIndex值变为15;后面的内容8884444再也不知足匹配规则，匹配完毕，reg的lastIndex值变为0

关于贪婪和惰性

字符串1234用/\d{1,3}/g和/\d{1,3}?/g匹配，会有不同的结果测试

const str = '1234';
const reg1 = /\d{1,3}/g;
const reg2 = /\d{1,3}?/g;
console.log(str.match(reg1));//["123","4"]
console.log(str.match(reg2));//["1","2","3","4"]
复制代码

没有加惰性符号?时，匹配默认是贪婪的，\d{1,3}匹配长度为1-3的数字，贪婪的匹配时没回都按最多的来，因此会有"123"，加了?表明惰性匹配，按最少的来，因此会是"1"

再好比，咱们要匹配一个标签中的href连接的话，则运用惰性标识?会颇有用

const str = '<a href="https://www.baidu.com" id="cscs" title="一个连接">测试文字</a>';
const reg1 = /".+"/g;
const reg2 = /".+?"/g;
console.log(str.match(reg1));//只匹配到1项
//["\"https://www.baidu.com\" id=\"cscs\" title=\"一个连接\""]

console.log(str.match(reg2));//匹配到3项
//["\"https://www.baidu.com\"", "\"cscs\"", "\"一个连接\""]
复制代码

几种表明性的正则写法

金额类数字,划分

将一个金额11222333444转为11,222,333,444的形式;

const str = '111333222';
const reg1 = /(\d{1,3})(?=(\d{3})+$)/g;
const reg2 = /(\d)(?=(\d{3})+$)/g;
const reg3 = /(?<=\d)(?=(\d{3})+$)/g;
const str2 = str.replace(reg1, '$1,');
const str3 = str.replace(reg3, ',');
const str4 = str.replace(reg2, '$1,');
const str5 = str.replace(reg1, function(match){
    return match+',';
});
console.log(str.match(reg1));//["11", "222", "333"]
console.log(str.match(reg2));// ["1", "2", "3"]
console.log(str.match(reg3));//["", "", ""]
console.log(str2);//11,222,333,444
console.log(str3);//11,222,333,444
console.log(str4);//11,222,333,444
console.log(str5);//11,222,333,444
复制代码
  • 须要注意两种RegExp匹配到的内容是不一样的，经过reg3能够看出，正则能够直接匹配到字符串之间的空白
  • reg3若是是/(?=(\d{3})+$)/g则会存在缺陷，由于
'111222333'.replace(/(?=(\d{3})+$)/g, ',');//,111,222,333
复制代码

因此须要对前边的字符进行限制

  • 另外number有toLocaleString方法，能够直接作这样的转换

下划线转驼峰命名

const str = 'get_my_color';
const str2 = str.replace(/_([a-z])/g, (item, $1) => $1.toUpperCase());
console.log(str2);
复制代码

电话号码隐藏中间4位

const str = '13311112222';
const str2 = str.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
const str3 = str.replace(/(\d{3})(?:\d{4})(\d{4})/, '$1****$2');
const str4 = str.replace(/(?<=\d{3})\d{4}(?=\d{4})/, '****');
console.log(str2);//133****2222
console.log(str3);//133****2222
console.log(str4);//133****2222
复制代码

str2和str4匹配到的内容是不一样的

判断一个字符串中出现次数最多的字符，并统计次数

这里是对分组的应用例子

const str = 'aaabbbcccaaabbbaaa';
const str2 = str.split('').sort().join('');  //"aaaaaaaaabbbbbbccc"
const arr = str2.match(/(\w)\1+/g);//对\1的应用
arr.sort(function(a,b) {
    return b.length - a.length;
});//按从大到小排序
console.log(arr);//["aaaaaaaaa", "bbbbbb", "ccc"]
console.log(arr[0]);//aaaaaaaaa
复制代码

字符串中空白插入指定字符

将qwer转为qwer*

const str = 'qwer';
const reg1 = new RegExp('', 'g');
const reg2 = /(?:)/g;
console.log(str.replace(reg1, '*'));//*q*w*e*r*
console.log(str.replace(reg2, '*'));//*q*w*e*r*
复制代码

直接写//g匹配空字符是无效的

找出连接中的文件后缀名

const str = 'https://pic2.zhimg.com/v2-5f03165aa5dff60d75c0f49f0ddd3db3_is.jpg?hhyr';
const reg1 = /(\.[A-z0-9]+$)|(\.[A-z0-9]+(?=\?\w+$))/;
const reg2 = /\.([A-z0-9]+)(\?\w*)?$/;
console.log(str.match(reg1)[0]);//.jpg
console.log(str.match(reg2)[1]);//jpg
复制代码

13提取Object.prototype.toString.call的类型

let a = new WeakMap();
function getType(o) {
    let str = Object.prototype.toString.call(o);
    let reg = /\b\w+(?=\]$)/;
    return str.match(reg)[0];
}
console.log(getType(a));//WeakMap
复制代码

经常使用的正则整理

/[1-9]\d*/;//正整数 /-[1-9]\d*/;//负整数 /(-?[1-9]\d*)|0/;整数(正整数、负整数和0)
/[\u4e00-\u9fa5]/;中文字符
复制代码

其余的待整理

正则在线测试工具菜鸟工具

参考多是最好的正则表达式的教程笔记了吧...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程