作者：徐小夕
转发链接：https://mp.weixin.qq.com/s/2Bk8lkRCNyaTWYtIB0oYVg
序言熟习我的朋友可能会知道，我一向是不写热点的。为什么不写呢？是由于我不关注热点吗？实在也不是。有些事宜我还是很关注的，也确实有不少想法和不雅观点。但我一贯奉行一个原则，便是：要做有生命力的内容。
对付前端工程师来说, 正则表达式大概是javascript措辞中最晦涩难懂的, 但是也每每是最简洁的.事情中碰着的很多问题,诸如搜索,查找, 高亮关键字等都可以利用正则轻松办理,以是有句话说的好:
正则用的好, 加班阔别我.
本日笔者就复盘一下javascript正则表达式的一些利用技巧和高等API, 并通过几个实际的案例,来展现正则表达式的魅力.如果大家以为正则表达式理解起来很麻烦,也可以利用如下在线网站, 只须要输入你的正则表达式, 它就能以图形的办法将你的正则展示出来:
你将收成模式匹配的用法(x)非捕获括号的模式匹配(?:x)先行断言x(?=y)后行断言(?<=y)x正向否定查找x(?!y)反向否定查找(?<!y)x字符凑集和反向字符凑集的用法[xyz]/[^xyz]词边界和非单词边界匹配/b/B空缺字符/非空缺字符匹配/s/S单字字符/非单字字符匹配/w/W正则10大运用案例正文
对付正则的基本用法笔者这里就不总结了,这里重点先容一些比较有用且难懂的知识点.在末了笔者会写10个经典的正则案例, 供大家学习参考, 或者在事情中直策应用.
以上几点运用笔者不才文中会写几个例子来讲解.
模式匹配的用法(x)模式匹配紧张用来匹配某一类字符串并记住匹配项.
案例:
let str = 'xuxi is xuxi is'let reg = /(xuxi) (is) \1 \2/greg.test(str) // true (1)str.replace(reg, '$1 $2') // xuxi is (2)复制代码
阐明: 个中括号被称为捕获括号, 模式中的 \1 和 \2 表示第一个和第二个被捕获括号匹配的子字符串，即 xuxi 和 is，匹配了原字符串中的后两个单词, 因此(1)中运行的结果为true. 当我们在字符串中利用replace时, 我们可以利用$1, $2这样的办法获取第n个匹配项,并用来更换字符串. 如(2)中的运行结果.
非捕获括号的模式匹配(?:x)紧张用来匹配某一类字符串但不记住匹配项.
案例:
let str = 'xuxixuxi'let reg = /(?:xuxi){1,2}/greg.test(str) // true (1)复制代码
阐明: 个中(?:)被称为非捕获括号, 我们可以利用它匹配一组字符但是并不记住该字符,一样平常用来判断某类字符是否存在于某字符串中.
先行断言x(?=y)先行断言: 匹配'x'仅仅当'x'后面随着'y'.
案例:
let str = '王者融化'let reg = /王(?=者)/reg.test(str) // true (1)复制代码
阐明: /王(?=者)/会匹配到"王"仅当它后面随着"者".但是"者"不属于匹配结果的一部分.
后行断言(?<=y)x后行断言: 匹配'x'仅当'x'前面是'y'.
案例:
let str = 'xuxiA'let reg = /(?<=xuxi)A/reg.test(str) // true (1)复制代码
阐明: /(?<=xuxi)A/会匹配到A仅当它前面为xuxi.但是xuxi不属于匹配结果的一部分.
正向否定查找x(?!y)正向否定查找: 仅仅当'x'后面不随着'y'时匹配'x'.
案例:
let str = '3.1415'let reg = /\d+(?!\.)/reg.exec(str) // [1415] (1)复制代码
阐明: 个中/\d+(?!.)/匹配一个或多个数字,当且仅当它后面没有小数点时, 以是(1)中实行后会匹配到1415而不是3.1415
反向否定查找(?<!y)x反向否定查找: 仅仅当'x'前面不是'y'时匹配'x'.
案例:
let str = '3.1415'let reg = /(?<!\.)\d+/reg.exec(str) // [3] (1)复制代码
阐明: /(?<!.)\d+/匹配一个数字,当且仅当前面字符不是.时,此时将匹配3.
字符凑集和反向字符凑集的用法 [xyz] / [^xyz][xyz]: 一个字符凑集。匹配方括号中的任意字符，包括转义序列。你可以利用破折号（-）来指定一个字符范围。
[^xyz]: 一个反向字符集。也便是说，它匹配任何没有包含在方括号中的字符。你可以利用破折号（-）来指定一个字符范围。任何普通字符在这里都是起浸染的
案例:
let str = 'abcd'let reg1 = /[a-c]+/let reg2 = /[^d]$/reg1.test(str) // true (1)reg2.test(str) // false (2)复制代码
阐明: (1)中将返回true由于字符串中包含a-c中的字符, (2)中奖返回false, 由于字符串结尾为d, 但正则reg2须要匹配结尾不为d的字符串.
词边界和非单词边界匹配\b\B\b 匹配一个词的边界。一个词的边界便是一个词不被其余一个“字”字符跟随的位置或者前面跟其他“字”字符的位置，例如在字母和空格之间。把稳，匹配中不包括匹配的字边界。换句话说，一个匹配的词的边界的内容的长度是0。
\B 匹配一个非单词边界。匹配如下几种情形：(1)字符串第一个字符为非“字”字符 (2)字符串末了一个字符为非“字”字符 (3)两个单词字符之间 (4)两个非单词字符之间 (5)空字符串
案例:
let str = 'xuxi'let reg1 = /xi\b/let reg2 = /xu\B/reg1.exec(str) // [xi] (1)reg2.exec(str) // [xu] (2)复制代码
阐明: (1)中匹配到了单词边界,即xi, 为该字符串的末端.(2)中应为xu为非单词边界,以是会被其匹配到.
空缺字符/非空缺字符匹配\s\S\s: 匹配一个空缺字符，包括空格、制表符、换页符和换行符.
\S: 匹配一个非空缺字符
案例:
let str = 'xuxi is'let reg1 = /.\s/glet reg2 = /\S\w/greg1.exec(str) // [xuxi] (1)reg2.exec(str) // [xuxi] (2)复制代码
阐明: (1)和(2)中实行之后都将匹配xuxi, 一个是空缺字符之前的匹配, 一个是非空缺字符的匹配.
单字字符/非单字字符匹配\w/W\w: 匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。
\W: 匹配一个非单字字符。等价于 [^A-Za-z0-9_]
由于以上2种模式比较大略,这里就不一一先容了.
正则10大运用案例接下来笔者将总结几个利用正则的实际运用,供大家学习和参考.
1. 去除字符串内指定元素的标签function trimTag(tagName, htmlStr) { let reg = new RegExp(`<${tagName}(\\s.)>(\\n|.)<\\/${tagName}>`, "g") return htmlStr.replace(reg, '')}复制代码2. 短横线命名转驼峰命名
// 短横线转驼峰命名, flag = 0为小驼峰, 1为大驼峰function toCamelCase(str, flag = 0) { if(flag) { return str[0].toUpperCase() + str.slice(1).replace(/-(\w)/g, ($0, $1) => $1.toUpperCase()) }else { return str.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase()) }}复制代码3. 实现一个大略的模板引擎
关于实现一个模板引擎, 实现中用到了大量的正则,建议感兴趣的可以直接看实现一个大略的模板引擎.
4. 去除字符串中的空格符function trimAll(str) { return str.replace(/\s/g,"")}复制代码5. 判断指定格式的数据输入合法性
function numCheck(str, specialNum) { if(str.indexOf(',') > -1) { return str.splite(',').every(item=>this.numCheck(item)); } else { return str.split(specialNum).length === 2; }}复制代码6. 去除url参数字符串中值为空的字段
// 去除url参数字符串中值为空的字段const trimParmas = (parmaStr:string = '') => { return parmaStr.replace(/((\w?)=&|(&\w?=)$)/g, '')}复制代码7. 将浏览器参数字符串转化为参数工具
function unParams(params = '?a=1&b=2&c=3') { let obj = {} params && params.replace(/((\w)=([\.a-z0-9A-Z])?)?/g, (m,a,b,c) => { if(b || c) obj[b] = c }) return obj}复制代码8. 打算字符串字节数
/ 打算字符串字节数 @param str @desc 一个中文占2个字节, 一个英文占一个字节 /function computeStringByte(str) { let size = 0, strArr = str.split(''), reg = /[\u4e00-\u9fa5]/ // 判断是否为中文 for(let i = strArr.length; i--; i>=0) { if(reg.test(strArr[i])) { size+= 2 }else { size += 1 } } return size}复制代码9. 匹配是否包含中笔墨符
function hasCn(str) { let reg = /[\u4e00-\u9fa5]/g return reg.test(str)}复制代码10. 实现搜索遐想功能
function searchLink(keyword) { // 仿照后端返回数据 let list = ['abc', 'ab', 'a', 'bcd', 'edf', 'abd']; let reg = new RegExp(keyword, 'i'); return list.filter(item => reg.test(item))}推举JavaScript经典实例学习资料文章
《前端口试者常常忽略的一道JavaScript 口试题》
《一行JS代码实现一个大略的模板字符串更换「实践」》
《JS代码是如何被压缩的「前端高等进阶」》
《前端开拓规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道 JavaScript知识点汇总（一）》
《关于前端174道 JavaScript知识点汇总（二）》
《关于前端174道 JavaScript知识点汇总（三）》
《几个非常故意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript 装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个 JavaScript 版敏感词过滤库》
《送你 43 道 JavaScript 口试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推举7个很棒的JavaScript产品步骤勾引库》
《Echa哥教你彻底弄懂 JavaScript 实行机制》
《一个合格的中级前端工程师须要节制的 28 个 JavaScript 技巧》
《深入解析高频项目中利用到的知识点汇总【JS篇】》
《JavaScript 工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新办法》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开拓H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind奥妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开拓工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开拓H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器高下旁边滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【根本篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《大略几步让你的 JS 写得更俊秀》
《恭喜你得到治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《口试中教你绕过关于 JavaScript 浸染域的 5 个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax要求》
《JavaScript+Canvas实现自定义画板》
《Continuation 在 JS 中的运用「前端篇」》
作者：徐小夕
转发链接：https://mp.weixin.qq.com/s/2Bk8lkRCNyaTWYtIB0oYVg
