当前位置: 首页 > Web前端 > HTML

周末在研究正则表达式,发现了这6个方便的正则表达式

时间:2023-04-02 23:34:42 HTML

作者:FarazKelhini译者:前端小智来源:medium点赞再看,养成这篇文章的习惯GitHubhttps://github.com/qq44924588...已经收录了,也整理了更多往期好评文章,也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。几乎所有流行的编程语言都支持正则表达式,因为正则表达式的功能太强大了,它可以让我们完成原本需要几十行代码的事情,而正则表达式一行就可以搞定。在本文中,我们将研究前端开发人员经常要处理的6种文本操作和操作,看看正则表达式如何简化这个过程。大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。查找包含特定单词的句子假设我们要匹配文本中包含特定单词的所有句子。因为这些句子需要在搜索结果中显示出来,或者想把它们从正文中去掉。正则表达式/[^.!?]*\bword\b[^.!?]*.?/gi可以为我们做到这一点。像这样:conststr="苹果树原产于中亚。全世界都有栽培。苹果在夏末或秋天成熟。"//查找包含单词“苹果”的句子str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi)//输出//=>["苹果树起源于中亚。","苹果在夏末或秋季成熟。"]那么,让我们得出这个正则表达式的意思:[^.!?]表示匹配任务字符,除了.,!和?*匹配[^.!?]结果0次或更多次.!?]表示匹配除.,!之外的任务字符和?*匹配[^.!?]结果的0次或更多次。匹配除换行符以外的任何字符?匹配。匹配结果的0次或1次g告诉正则表达式引擎匹配所有匹配项,而不是在第一个匹配项后停止i使搜索不区分大小写从文件名中删除无效字符下载的文件名称中不应包含某些字符。例如,在Windows中,下列字符在文件名中是无效的,应该被删除:<>:“/\|?*使用正则表达式,删除无效字符非常简单。让我们看一个例子conststr="https://en.wikipedia.org/"str.replace(/[<>|:"*?\\/]+/g,'')//=>"httpsen。wikipedia.org[]被称为字符类,JS会将字符串与方括号之间的字符之一进行匹配,并且通过全局(g)标志,我们可以有效地将方括号内的字符从字符串中剥离出来。注意,在字符类中,反斜杠有特殊含义,必须用另一个反斜杠进行转义:\\。+运算符表示重复一个字符类,以便同时替换一系列无效字符,有利于提高性能.当然可以省略,对结果没有影响,记住replace()方法的第二个参数必须是空字符串,除非你想用另一个字符替换无效字符。Windows内部还有几个保留名称用于执行各种任务,这些保留名称不允许作为文件名,保留名称如下:CON、PRN、AUX、NUL、COM1、COM2、COM3、COM4、COM5、COM6、COM7、COM8、COM9、LPT1、LPT2、LPT3、LPT4、LPT5、LPT6、LPT7、LPT8和LPT9如果您想了解更多信息,Microsoft的Windows开发中心有一篇关于有效文件名的详尽文章。要排除保留名称,可以使用以下代码:str.replace(/^(CON|PRN|AUX|NUL|COM1|COM2|COM3|COM4|COM5|COM6|COM7|COM8|COM9|LPT1|LPT2|LPT3|LPT4|LPT5|LPT6|LPT7|LPT8|LPT9)$/i,'file')上面的代码主要是将保留字替换为指定的字符。注意,如果字符串中包含保留字以外的字符,则不会被替换。例如,将替换“con”,但不会替换“concord”,因此这是一个有效的文件名。其中,^匹配字符串的开头。它确保在我们匹配的字符串之前没有其他字符出现,$匹配字符串的结尾。我们还可以通过使用字符类以更简单的方式简化此正则表达式:str.replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i,'file')[1–9]匹配1到9之间的一个数字,大家都说简历里没有项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。Replacemultiplespaceswithasinglespace重复的空格字符在呈现网页时显示为单个空格。然而,有时我们希望用户输入或其他数据包含多个空格,而我们只想用一个空格来表示。使用正则表达式很容易做到这一点:conststr="我的观点可能已经改变,但事实并非如此。"str.replace(/\s\s+/g,'')//=>"我的观点可能已经改变,但事实并非如此,我是对的。”此正则表达式仅包含两个元字符、一个运算符和一个标志:\s匹配单个空白字符,包括ASCII空白、制表符、换行符、回车符、垂直制表符和换页符\s再次匹配一个空格字符+匹配前一个item一次或多次,即匹配一个或多个空格g告诉正则表达式公式引擎匹配所有出现的地方,而不是在第一次匹配后停止。上面的结果是所有重复至少两次的空白字符都被替换了。请注意,上面示例中的结果在开头仍有空白字符,应将其删除。为此,只需将trim()函数添加到语句的末尾:str.replace(/\s\s+/g,'').trim()//=>"Myopinionsmayhavechanged,butnot我是对的事实。”请记住,此代码用空格(U+0020)字符符号替换任何类型的空白字符,包括ASCII空格、制表符、换行符、回车符、垂直制表符和换页符。因此,如果回车紧跟在制表符之后,它们将被替换为空格。如果这不是我们的意图,而我们只想替换相同类型的空格,请改用以下代码:str.replace(/(\s)\1+/g,'$1').trim();\1是反向引用,匹配第一对括号(\s)中匹配的相同字符。为了替换它们,我们在replace()的第二个参数中使用$1,它将匹配的字符插入括号内。限制用户只能输入数字或字母Web开发中常见的表单操作是限制用户输入。例如,我们想限制用户只能使用数字或字母。同样,使用正则化,这很容易做到:使用字符类来定义允许的字符范围,然后附加一个量词来指定可以重复的字符数:constinput1="John543";constinput2=":-)";/^[A-Z0-9]+$/i.test(input1);//→真/^[A-Z0-9]+$/i.test(input2);//→false工作原理如下:^匹配字符串的开头,它确保我们要匹配的字符串之前没有出现其他字符。[A-Z0–9]匹配A和Z之间或0和9之间的字符。由于这是区分大小写的,我们放置了i标志,这意味着忽略大小写。或者,我们可以使用[A-Za-z0–9]代替。+匹配一次或多次。因此,输入必须包含至少一个非空白字母数字字符;否则,匹配失败。如果你想让这个字段成为可选的,你可以使用*量词,它匹配前面的项目零次或多次。$匹配字符串的结尾。将URL变成链接假设文本中有一个或多个URL不是HTML锚元素,因此无法单击。我们希望自动将URL转换为链接。为此,我们首先需要找到URL,然后将每个URL包装在...标记中,并使用的href属性指向该URL:conststr="Visithttps://en.wikipedia.org/获取更多信息。”;str.replace(/\b(https?|ftp|file):\/\/\S+[\/\w]/g,'$&')//=>"访问https://en.wikipedia.org/获取更多信息."看看这段代码是如何工作的:\b匹配单词边界的位置(https?|ftp|file)匹配字符https、http、ftp或文件。:按字面匹配冒号\/按字面匹配正斜杠字符\S匹配任何非空格的单个字符+匹配前一项或多次[\/\w]匹配正斜杠或单词字符。如果没有这个,正则表达式将匹配URL末尾的所有标点符号g告诉正则表达式引擎匹配所有出现的地方,而不是在第一次匹配后停止$&在replace()的第二个参数中,将匹配的子字符串插入到替换字符串并删除重复的单词。有时我们会发现有些文章有重复的词。幸运的是,正则表达式只用一行就解决了这个问题:conststr="Thissentencehashashasdoublewords."str.replace(/\b(\w+)\s+\1\b/gi,'$1')//=>"Thissentencehasdoublewords."\b匹配一个词的边界\w匹配一个词字符+匹配前一项或多次\1是反向引用,表示第一个括号匹配的文本in\b匹配一个词边界g告诉正则表达式引擎去匹配所有出现的地方而不是在第一个匹配之后就停止i忽略case$1表示该组的第一个文本内容总结正则表达式已经成为任何程序员必备的技能之一。在本文中,我们研究了前端开发人员如何利用正则表达式来执行各种任务。然而,我们只触及了正则表达式的皮毛。我觉得花更多的时间去学习规律是值得的。有时候我们遇到非常复杂的规则,当你的同事绞尽脑汁写了几百行代码的时候,你只用一个正则规则就可以搞定,相信,你的同事会对你刮目相看。快点!!!原文:https://code.tutsplus.com/tut...代码部署后可能存在的bug无法实时获知。之后为了解决这些bug,花费了大量的时间在日志调试上。顺便在这里推荐给大家。一个简单易用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新(比博文早一两篇)。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多,欢迎Star和完善,可以参考考试中心面试复习,关注公众号,后台会回复福利,福利可以看到,你知道。