投稿
  1. 首页
  2. html-js-css

正则表达式——Javascript

code • 2022-5-16 • html-js-css • 阅读 20

正则表达式——Javascript,第1张

什么是正则表达式？

正则表达式 (regular expression) 描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等.

感受正则的魅力 
let title = "现在是2020年11月10日13点15分";
// 普通方式拿到上面一段文字中的数字
let time = [...title].filter((item) => !Number.isNaN(Number.parseInt(item)));
// 拿到数字
console.log(time.join(""));

// 使用正则获取数字,正则比上面的要简洁的多
let numbs = title.match(/\d/g);
console.log(numbs.join(""));

// 打印结果完全相同
console.log(time.join("") === numbs.join("")); //true
匹配模式 g 全局匹配i 不区分大小写m 多行匹配s 将字符串视为单行匹配y 模式表示匹配到不符合的就停掉，不会继续往后匹配，必须连续的符合条件的 字面量方式创建正则表达式 
let title = "songzhengxiang";
// test是检测的意思
// 判断字符串中是否有s
console.log(/s/.test(title));

let reg = /a/;
console.log(reg.test(title));
选择符使用：或者

| 用一个竖杠表示或者

let title = "songzhengxiang";
// 一个竖表示或者，两边的表达式满足任意条件即可
console.log(/song|x/.test(title));

let tel = "020-9999999";
console.log(/(010|020)\-\d{7,8}/.test(tel));
原子表和原子组选择符

() 小括号表示院子组，[] 中括号表示原子表

// 原子表有或者的意思，1或者2或者3
let reg = /[123]/g;
// 院子组表示一个具体值,123或者456
let reg2 = /(123|456)/g;
let title = "1234688";
console.log(reg.test(title)); // true
console.log(reg2.test(title)); // true

console.log(title.match(reg)); //  ["1", "2", "3"]
console.log(title.match(reg2)); //  ["123"]
 正则表达式中的转义符

 \ 斜杠表示转义符

let numb = 23.32;
// 斜杠为转义符
// 正则含义：一个或多个数字加上一个点再加上一个或多个数字
let reg = /\d+\.\d+/;
console.log(reg.test(numb));

// 验证网址
let url = "https://www.baidu.com";
let urlReg = /https?:\/\/\w+\.\w+\.\w+/;
console.log(urlReg.test(url));
 字符边界约束

 ^ 表示正则开始，$ 表示正则结束

let numb = "125499999";
// 限制以数字开始的数字结束的长度是5到9位的数字,同时以数字开始并且以数字结束
// ^ 表示开始，$ 表示结束
let numreg = /^\d{5,9}$/;
console.log(numreg.test(numb)); // true
 数值与空白元字符

\d, 匹配数字\D, 匹配除了数字[], 中括号里面出现的东西就要，如果中括号里面加上 ^ 表示不匹配中括号里面的内容\s, 小写的 s 表示匹配空格\S, 大写的 S 表示匹配除了空格+ 号匹配多个字符 
let tel = `李四：010-56948754，张三：020-23522222`;
// 只匹配第一个数字
console.log(tel.match(/\d/));
// 匹配第一组是数字得值
console.log(tel.match(/\d+/));
// g表示全局匹配，小写的\d表示匹配数组
console.log(tel.match(/\d{3}\-\d{8,9}/g));

// 大写的\D表示匹配除了数字
console.log(tel.match(/\D+/g));

// [],中括号里面出现的东西就要,如果中括号里面加上^表示不匹配中括号里面的内容
// \s,小写的s表示匹配空格
// \S,大写的S表示匹配除了空格
// +号匹配多个字符
console.log(tel.match(/[^：，\d\s-]+/g));
 w 和 W 元字符
 \w 小写的 w 表示匹配字母、数字、下划线\W 大写的 w 表示匹配不是字母、数字、下划线 
// 例子：匹配邮箱
let email = "15039155555@163.com";
let emailreg = /^\w+@\w+\.\w+$/;
console.log(email.match(emailreg));
console.log(emailreg.test(email));
点元字符使用

 . 表示除了换行符以外的字符

// . 表示除了换行符以外的字符
let title = `15039155555
                     @163.com
                    `;
// 只匹配到15039155555
console.log(title.match(/.+/g));

// 末尾跟上小写s表示将字符串视为单行匹配
let nwetitle = title
  .match(/.+/s)[0]
  .match(/[^\s]*/g)
  .join("");
console.log(nwetitle); // 15039155555@163.com
如何精巧匹配所有字符
[\s\S] 匹配空格和不是空格，两个都加上表示所有[\d\D] 匹配数字和不是数字，两个都加上表示所有 
let html = `
            
                songzhnegxiang
                SONG
                Xiang
            
        `;

// 使用原子表匹配所有字符
// []字符只要有中括号里面的内容就可以匹配到
// \s\S 匹配空格和不是空格，两个都加上表示所有
console.log(html.match(/[\s\S]+<\/span>/));

// 或者采用 \d\D ,表示匹配数字和不是数字的
console.log(html.match(/[\d\D]+<\/span>/));
i 和 g 模式修正符
 i 不区分大小写g 全局匹配 
let name = "SongZhengSiang";
// 查找s,不区分大小写
console.log(name.match(/s/gi));

// 全局替换 *** 作
let time = "2020/11/10";
// 吧斜杠换为横杠 2020-11-10
console.log(time.replace(/\//g, "-"));
 m 多行匹配修正符

 m 多行匹配

let lessonobj = `
    #1 js,200元 #    
    #2 vue,500元 #    
    #3 angular,199元 # song   
    #4 node.js,188元 #        
`;

let lesobj = lessonobj.match(/\s*#\d+\s+.+\s+#\s+$/gm).map((item) => {
  // 删除多余的字段
  item = item.replace(/\s*#\d\s*/, "").replace(/\s*#\s*/, "");
  let [name, price] = item.split(",");
  return { name, price };
});
console.log(lesobj);
汉字和字符属性 
let name = "songZX,你好中国,upup....加油！！！";

let str = "豆腐";

// 匹配所有字母
console.log(name.match(/[a-z]+/gi)); // ["songZX", "upup"]

// 匹配标点符号
console.log(name.match(/\p{P}/gu)); // [",", ",", ".", ".", ".", ".", "！", "！", "！"]

// 匹配汉字
let strs = str.match(/\p{sc=Han}+/gu);
console.log(strs); // ["豆腐"]

// 匹配汉字
let hanzi = name.match(/[\u4e00-\u9fa5]+/g);
console.log(hanzi); // ["你好中国", "加油"]
lastIndex 属性的使用 
let name = "songzx";

// match获取元素只能获取到第一个元素的主信息
// 加上g后主信息会丢失
console.log(name.match(/\w/));

let reg = /\w/g;
// 使用exec每检索一次，正则中的lastindex会加1
while ((res = reg.exec(name))) {
  console.log(res);
  // 此模式正则必须为g模式
  console.log(reg.lastIndex);
}
有效率的 y 模式

y 模式表示匹配到不符合的就停掉，不会继续往后匹配，必须连续的符合条件的

let name = "我的qq号是,1111111111,22224545488,6411313416544婚姻加入";

// 查到数字，逗号有或没有
// y 模式找到后就不会继续往后找
let reg = /(\d+),?/y;
reg.lastIndex = 7;
let qqList = [];
while ((res = reg.exec(name))) {
  console.log(res);
  qqList.push(res[1]);
}
console.log(qqList); // ["1111111111", "22224545488", "6411313416544"
原子表的基本使用 
let name = "songzhengxiang";
// 原子表表示里面的内容时或者的关系,检测的内容在其中就可以被匹配到
let namereg = /[szx]/g;
console.log(name.match(namereg));

let time = "2020-s11-s13";
//  和 必须配合（）使用，表示后面的内容必须和第一个小括号匹配到的内容相同
let reg = /^\d{4}([-\/])(s)\d{2}\d{2}$/;
console.log(time.match(reg));
区间匹配

 [a-z] 匹配 26 位小写字母
[0-9] 匹配 0-9 之间的数字，包含 0 和 9

// [a-z] 或者 [0-9] 表示区间，只能是升序书写，不能降序书写
let a = "s5df5sf5s165s6dfsdf513d2f";

// 匹配0-9的数字
let numreg = /[0-9]+/g;
console.log(a.match(numreg)); // ["5", "5", "5", "165", "6", "513", "2"]

// 匹配字母
let objreg = /[a-z]+/g;
console.log(a.match(objreg)); // ["s", "df", "sf", "s", "s", "dfsdf", "d", "f"]
排除匹配 

let name = "songkkkzhenglllxiang";
// [^kl]表示排除字母k或者字母l
let reg = /[^kl]+/g;
console.log(name.match(reg));
原子表字符不会解析 
let name = "(songzheng).+";
// 在原子表中的特殊字符不会被当成有特殊含义的字符，只会当做特殊字符来匹配
let reg = /[().+]/g;
console.log(name.match(reg)); // ["(", ")", ".", "+"]
使用正则去除字符串中的所有空格 
let title = "  111  2 33  ";
// 去空格，去除中间或者两边的空格
function trimreg(data) {
  return data.match(/[^\s]+/gm).join("");
}
console.log(trimreg(title)); // 111233
 认识原子组

 一个小括号包起来的东西被称为原子组，\1 表示与第一个原子组相同的内容

let dom = `
    标题一
    标题二
`;
// 一个小括号包起来的东西被称为原子组,\1表示与第一个原子组相同的内容

let reg = /<(h[1-6])>[\s\S]*<\/>/g;
console.log(dom.match(reg)); // ["标题一", "标题二"]
邮箱验证使用原子组

验证邮箱表达式：/^[\da-z][\w.]+@(\w+.)+(com|cn|org)$/i
含义：以数字或者字母开头，数字字母下划线为主体，一个 @符号，后面跟上数字字母下划线和小数点，可以为多个，以 com 或 cn 或 org 结尾

 
 嵌套分组和不记录分组

原子组里面加上？: 表示不记录该原子组，但是原子组的功能仍然生效

let url = `
    http://www.baidu.com
    https://taobao.cn
    https://www.zhifubao.com
`;

// 原子组里面加上?:表示不记录该原子组，但是原子组的功能仍然生效
let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn))/gi;

let urls = [];
while ((res = reg.exec(url))) {
  // 1 表示第一个原子组
  urls.push(res[1]);
}
console.log(urls); // ["www.baidu.com", "taobao.cn", "www.zhifubao.com"]
重复匹配的使用
+：一个或者多个*：零个或者多个？：有或者没有{1,2}：一个到两个，最少一个，最多 2 连个，数字随便定义 
let name = "sooooo";
// + ：一个或者多个
console.log(name.match(/so+/)); // sooooo

// * ：零个或者多个
console.log(name.match(/so*/)); // sooooo

// ? ：有或者没有
console.log(name.match(/so?/)); // so

// {1,2} ：一个到两个，最少一个，最多两个
console.log(name.match(/so{1,2}/)); // soo
 重复匹配对原子组影响

 


let name = "sososososososos";
// 连续匹配so，使用原子组包起来是里面的内容就变成了一个整体
console.log(name.match(/(so)+/g)); // ["sososososososo"]
禁止贪婪

 ? 禁止贪婪，会匹配最小的那个单位

let name = "soooooo";

// *：零个或多个，加上问号表示匹配0个
let reg = /so*?/g;
console.log(name.match(reg)); // ["s"]

// +：一个或多个，加上问号表示只匹配1个
reg = /so+?/g;
console.log(name.match(reg)); // ["so"]

// ?：0个或者1个，再加上问号表示只匹配0个
reg = /so??/g;
console.log(name.match(reg)); // ["s"]

// {2,5} 表示匹配2到5个，加上问号表示匹配2个
reg = /so{2,5}?/g;
console.log(name.match(reg)); // ["soo"]
 使用 matchAll 完成全局匹配

 matchAll 获取到的是一个迭代对象，可以被遍历到


  哈哈哈,sdfsdf
  嘿嘿嘿
  呵呵呵
  嘎嘎嘎
 字符串的 search 方法和 match 方法

 字符串的 search 方法，找到后返回字符串所在下标，否则返回 - 1

let urls = `
            http://www.baidu.com,
            http://taobao.com.cn,
            https://www.tmall.com/
        `;

// 字符串的search方法,找到后返回字符串所在下标，否则返回-1
console.log(urls.search("baidu")); // 24

let reg = /https?:\/\/(\w+)?(\w+\.)+(com|cn)/g;
// ["http://www.baidu.com", "http://taobao.com.cn", "https://www.tmall.com"]
console.log(urls.match(reg));
$ 符在正则替换中的使用
$` : 获取替换元素左边的元素$‘ : 获取替换元素右边的元素$& : 获取替换元素本身 
let time = "2020-05-05";
console.log(time.replace(/-/g, "/")); //2020/05/05

let tel = "(0631)-150518888";
let telreg = /\((\d{3,4})\)-(\d+)/g;
// 在replace中表示第一个原子组匹配到的内容
console.log(tel.replace(telreg, "/")); // 0631/150518888

// $` : 获取替换元素左边的元素
// $' : 获取替换元素右边的元素
// $& : 获取替换元素本身
let name = "123你好+++";
console.log(name.replace("你好", "$`$&$'")); // 123123你好++++++
原子组起别名
使用 ? 起原子组的别名使用 $ 读取别名 

  百度
  支付宝
后等断言

(?=xxx) 匹配右侧是 xxx 的字段

张三先生和张三女士是天造地设的一对
前等断言

 (?<=href=(['"])) 前面是 href = 单引号或者双引号的字段


  百度
  雅虎
后不等断言

 ?! 表示不是以什么什么结尾

let user = `阅读量：999
新增人数：10人`;
// 匹配前面不是空格的一个或多个，后面不是数字的字段
let reg = /\S+(?!\d+)$/g;
console.log(user.match(reg).join("")); // 新增人数：10人
前不等断言

 ? 

// ?
使用断言模糊电话号 
// 不使用断言
let tels = `15036999999`;
let reg = /(\d{3})(\d{4})(\d+)/g;
tels = tels.replace(reg, (v, ...args) => {
  args[1] = "*".repeat(4);
  return args.splice(0, 3).join("");
});
console.log(tels); // 150****9999

// 使用断言
let newtel = `15036999999`;
// 匹配前面是由3位数字组成，后面是由4位数字组成的字段
let newreg = /(?<=\d{3})\d{4}(?=\d{4})/g;
newtel = newtel.replace(newreg, (v) => {
  // 将这个字段替换成4个*号
  return "*".repeat(4);
});
console.log(newtel); // 150****9999

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/924755.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-16
下一篇 2022-05-16

发表评论

登录后才能评论

评论列表（0条）

保存