前言熟悉我的朋友可能知道我没写过热点。为什么不写呢？是因为我不注意热点吗？其实并不是。我对一些事情还是很关心的，确实有很多想法和看法。但我一直奉行一个原则，那就是：以活力为知足。对于前端工程师来说，正则表达式可能是javascript语言中最晦涩的，但往往也是最简洁的。工作中遇到的很多问题，比如查找、查找、高亮关键词等，都可以使用正则表达式很容易解决，所以有句话说得好：正则表达式用得好，加班离我远了.今天，笔者就来回顾一下javascript正则表达式的一些使用技巧和高级API，通过几个实际案例展示正则表达式的魅力。如果你觉得正则表达式理解起来麻烦，你也可以使用下面的在线网站，只要输入你的正则表达式，它就会以图形的方式显示你的正则表达式：youwillgetpatternmatchingUsage(x)Patternmatchingofnon-capturingparentheses(?:x)Look-aheadassertionx(?=y)Lookaheadassertion(?<=y)xForwardnegativelookupx(?!y)Backwardnegativelookup(?characterset和reverse字符集的用法[xyz]/[^xyz]字界与非字界匹配/b/B空白字符/非空白字符匹配/s/S单字字符/非单字字符匹配/w/W正则作者正则表达式在10大应用案例中的基本用法就不一一总结了，这里重点介绍一些有用的和难点的知识点，最后笔者会写出10个经典的正则表达式案例，供大家学习参考，或者在工作中使用直接在应用中使用，笔者下面会写几个例子来说明以上几点的应用。模式匹配的用法(x)模式匹配主要用于匹配某种类型的字符串，并记住匹配项。case:letstr='xuxiisxuxiis'letreg=/(xuxi)(is)\1\2/greg.test(str)//true(1)str.replace(reg,'$1$2')//xuxiis(2)解释：其中括号称为捕获括号，模式中的\1和\2表示捕获括号匹配的第一个和第二个子串，即xuxi和is，匹配原字符串中的最后两个词，所以在(1)运算结果为真。当我们在字符串中使用replace时，可以通过$1,$2得到第n个匹配项，用它来替换字符串。如(2)中的运算结果。非捕获括号模式匹配(?:x)主要用于匹配某类字符串但不记住匹配项。案例：letstr='xuxixuxi'letreg=/(?:xuxi){1,2}/greg.test(str)//true(1)解释：where(?:)称为非捕获括号，我们可以用它们来匹配一组字符但不记得字符，一般用于判断字符串中是否存在某种类型的字符。先行断言x(?=y)是先行断言：仅当'x'后跟'y'时才匹配'x'。示例：letstr='kingmelt'letreg=/king(?=)/reg.test(str)//true(1)解释：/king(?=者)/只有在后面跟有“王”时才会匹配“者”。但是“者”不是匹配结果的一部分。先行断言(?<=y)x后行断言：仅当'x'前面有'y'时才匹配'x'。案例：letstr='xuxiA'letreg=/(?<=xuxi)A/reg.test(str)//true(1)解释：/(?<=xuxi)A/只有在A前面有徐溪。但是xuxi并不是比赛结果的一部分。Positivenegationlookupx(?!y)Positivenegationlookup：仅当'x'后面没有'y''x'时才匹配。案例：letstr='3.1415'letreg=/\d+(?!\.)/reg.exec(str)//[1415](1)解释：其中/\d+(?!.)/匹配一个或多个数字,当且仅当后面没有小数点时,所以(1)会匹配1415而不是3.1415反向负查找(?反向负查找:只有当'x'不在'y'前面时才匹配'x'.case:letstr='3.1415'letreg=/(?(\\n|.)*<\\/${tagName}>`,"g")returnhtmlStr.replace(reg,'')}2.短线名转驼峰名//短线转驼峰名，flag=0为小驼峰，1为大驼峰functiontoCamelCase(str,flag=0){if(flag){returnstr[0].toUpperCase()+str.slice(1).replace(/-(\w)/g,($0,$1)=>$1.toUpperCase())}else{returnstr.replace(/-(\w)/g,($0,$1)=>$1.toUpperCase())}}3.实现一个简单的模板引擎关于实现一个模板引擎，很多正则化是在实施中使用。建议有兴趣的可以直接看一个简单模板引擎的实现。4.去除字符串中的空格functiontrimAll(str){returnstr.replace(/\s*/g,"")}5.判断指定格式数据输入的合法性functionnumCheck(str,specialNum){if(str.indexOf(',')>-1){returnstr.splite(',').every(item=>this.numCheck(item));}else{returnstr.split(specialNum).length===2;}}6.去掉url参数字符串中的空字段//去掉url参数字符串中的空字段consttrimParmas=(parmaStr:string='')=>{returnparmaStr.replace(/((\w*?)=&|(&\w*?=)$)/g,'')}7.替换浏览器参数String转换为参数对象函数unParams(params='?a=1&b=2&c=3'){letobj={}params&¶ms.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g,(m,a,b,c)=>{if(b||c)obj[b]=c})returnobj}8。计算字符串字节数/***计算字符串字节数*@paramstr*@desc一个中文占2个字节，一个英文占一个字节*/functioncomputeStringByte(str){letsize=0,strArr=str.split(''),reg=/[\u4e00-\u9fa5]///判断是否中文for(leti=strArr.length;i--;i>=0){if(reg.test(strArr[i])){size+=2}else{size+=1}}returnssize}9.匹配是否包含汉字functionhasCn(str){letreg=/[\u4e00-\u9fa5]/greturnreg.test(str)}10.实现搜索关联函数functionsearchLink(keyword){//模拟后端返回数据letlist=['abc','ab','a','bcd','edf','abd'];letreg=newRegExp(keyword,'i');returnlist.filter(item=>reg.test(item))}
