当前位置: 首页 > 科技观察

6个超级好用的正则表达式,前端开发者一定知道

时间:2023-03-17 00:29:03 科技观察

正则表达式已经成为程序员必备的工具。几乎所有流行的编程语言都支持正则表达式,原因如下:正则表达式为开发人员提供了强大的工具,可以快速执行需要几十行代码才能完成的任务。本文探讨了前端开发人员经常面临的六大文本处理和操作任务,并详细了解正则表达式如何简化该过程。但这只是正则表达式潜力的冰山一角。1、将URLs转换为链接假设文本中有一个或多个URLs,而且没有一个是HTML锚元素,所以无法点击。要自动将url转换为链接,首先找到url,然后将每个url包装到一个带有href属性的标签中指向该url...:conststr="Visithttps://en.wikipedia.org/fororeinfo.";str.替换(/\b(https?|ftp|file):\/\/\S+[\/\w]/g,'$&');//=>"访问https://en.wikipedia.org/获取更多信息。"注意:使用此正则表达式时要小心,因为它不会匹配以标点符号结尾的URL,也可能无法匹配更复杂的URL。它是这样工作的:\b匹配所谓的“单词边界”。(https?|ftp|file)匹配字符“https”、“http”、“ftp”或“file”:按字面匹配冒号字符\/按字面匹配正斜杠字符\S匹配除空格外的单个字符+以外的字符与前一项匹配一次或多次[\/\w]与正斜杠或单词字符匹配。否则,正则表达式将匹配URL末尾的任何标点符号。g命令正则表达式引擎匹配所有匹配项,而不是在第一次匹配后停止。$&在replace()的第二个参数中,将匹配的子字符串插入到替换字符串中2.删除重复的单词文章和教程中包含不必要的重复单词的情况并不少见。即使是专业作家也必须校对这些错误。在Google新闻中简单搜索“the”,就会显示在数百家知名新闻机构的文章中重复出现的“the”。幸运的是,正则表达式可以用一行解决这个问题:conststr="Thisthissentencehasdoublewords.";str.replace(/\b(\w+)\s+\1\b/gi,'$1');//=>"Thissentencehasdoublewords”\b匹配“单词边界”(它后面或前面有ASCII字母、数字或下划线)。\w匹配一个单词字符(ASCII字母、数字或下划线)+匹配前一项或多次\s匹配一个空白字符+匹配前一项或多次,以便可以检测到重复的多个空白字符单词\1反向引用并匹配文本是否与第一对括号中匹配的文本相同\b匹配单词边界g指示正则表达式引擎匹配所有出现而不是停止在第一个匹配i使搜索不分大小写(忽略大小写差异)$1将第一对括号中匹配的文本插入到replace()的第二个参数中3.从文件名中删除无效字符当提供下载文件时,文件名不应包含某些字符。例如,在Windows操作系统中,以下字符在文件名中是无效的,应该被删除:<(小于)>(大于):(冒号)"(双引号)/(正斜杠)\(反斜杠)|(竖线)?(问号)*(星号)使用正则表达式删除无效字符非常简单。让我们看一个例子:conststr="https://en.wikipedia.org/";str.replace(/[<>|:"*?\\/]+/g,'');//=>"httpssen.wikipedia.org"",被称为字符类,匹配方括号之间的单个字符。因此通过将所有无效字符放入其中并在正则表达式末尾添加全局(g)标志,这些字符是effectivelyremovedfromastring.请注意,在字符类中,反斜杠具有特殊含义,必须使用另一个反斜杠进行转义:\\.operator+repeat-character-class,以便无效字符也被替换序列,这有助于提高性能。它可以省略而不影响结果。记住replace()方法的第二个参数必须是一个空字符串,除非你想用另一个字符替换一个无效的字符。有一些Windows内部使用的保留名称用于各种任务,不允许作为文件名。保留名称如下:CON,PRN,AUX,NUL,COM1,COM2,COM3,COM4,??COM5、COM6,COM7,COM8,COM9,LPT1,LPT2,LPT3,LPT4,LPT5,LPT6,LPT7,LPT8,andLPT9要删除保留名称,请运行以下代码: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,'文件');基本上,此代码指示正则表达式引擎替换str中的字符,如果它们构成由竖线字符(|)分隔的单词之一。在此示例中不能将空字符串用作第二个参数,因为该文件没有名称。请注意,如果字符串包含任何其他字符,则不会被替换。例如,“con”将被替换,但“concord”不会被替换,这是一个有效的文件名。这是通过在正则表达式中使用^和$来实现的。^匹配字符串的开头,这确保了要匹配的字符串之前没有其他字符。$匹配字符串的结尾。这个正则表达式也可以使用字符类以更紧凑的方式编写:str.replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i,'文件');[1–9]匹配数字1-94.将多个空格替换为单个空格渲染网页时,重复的空格字符将显示为单个空格。但是,有时需要清理用户输入或其他数据,并用单个空白替换重复的空白。以下是使用正则表达式执行此操作的方法:conststr="Myopinionsmayhavechanged,butnotthefactthatI'mright.";//AshleighBrilliantstr.replace(/\s\s+/g,'');//=>"Myopinionsmayhavechanged,butnotthefactthatI'mright."好吧。此正则表达式仅包含两个元字符、一个运算符和一个标记:\s匹配单个空白字符,包括ASCII空格、制表符、换行符、回车符、垂直制表符和形式换行符\s再次匹配单个空白字符+匹配前一次或多次g命令正则表达式引擎匹配一个项目的所有出现,而不是在第一次匹配后停止结果是替换所有重复至少两次的空白字符。请注意,上面示例中的结果在开头仍有一个空白字符,应将其删除。为此,只需将trim()函数添加到语句的末尾:str.replace(/\s\s+/g,'').trim();//=>"Myopinionsmayhavechanged,butnotthefactthatI'mright."请记住,此代码用空格(U+0020)字符替换任何类型的空白字符,包括ASCII空格、制表符、换行符、回车符、垂直制表符和表格换行符。因此,如果回车紧跟在制表符之后,它们将被空格代替。如果这不是目的,你只是想替换相同类型的空白,你可以使用以下代码代替:str.replace(/(\s)\1+/g,'$1').trim();\1是反引号,匹配第一对括号(\s)内匹配的字符。可以在replace()的第二个参数中使用$1替换它们,它插入括号中匹配的字符。5.查找包含特定单词的句子假设您要匹配文本中包含特定单词的所有句子。或者您可能想在搜索结果中突出显示这些句子,或者您可能想从文本中删除它们。正则表达式/[^.!?]*\bword\b[^.!?]*.?/gi可以满足上述要求。它是这样工作的:conststr="TheappletreeoriginatedinCentralAsia.Itiscultivatedworldwide.Applematuresinlatesummeroraautumn.";//en.wikipedia.org/wiki/Apple//findsentencesthatcontaintheword"apple"str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi);//=>["TheappletreeoriginatedinCentralAsia.","Applematuresinlatesummeroraautumn."]下面一步一步来学习正则表达式:[^.!?]匹配除了.,!,和?*以外的字符匹配前一项的零个或多个序列\b匹配“单词边界”(后跟或前跟ASCII字母、数字或下划线)。apple按字面意思匹配字符(将i标志添加到此正则表达式的末尾,因为它区分大小写)\b匹配单词边界[^.!?]匹配除.、!和?之外的所有字符。*匹配前面术语的零个或多个序列匹配除换行符之外的所有字符?匹配零次或一次出现的前面的术语g指示正则表达式引擎匹配所有出现的术语而不是在第一次匹配时停止i使搜索不区分大小写提示:使用Bit(Github)从代码中“获取”组件存储库以逐步构建UI组件库。与您的团队一起使用这个UI组件库,以实现一致的UI、快速开发和无限协作。轻松将可重用组件导入任何项目,使用和更新以同步跨存储库的更改。示例:搜索bit.dev上共享的React组件6.将用户输入限制为字母数字字符Web开发时的一个常见任务是将用户输入限制为字母数字字符(A-z、A-z和0-9)。使用正则表达式实现这个任务非常简单:使用一个字符类来定义允许字符的范围,然后在其上添加一个量词来指定可以重复的字符数:constinput1="John543";constinput2=":-)";/^[A-Z0-9]+$/i.test(input1);//→true/^[A-Z0-9]+$/i.test(input2);//→false注意:正则表达式仅适用于英语,不匹配重音字母或其他语言的字母。它是这样工作的:^匹配字符串的开头。确保要匹配的字符串之前没有其他字符。[A-Z0–9]匹配A和Z之间或0和9之间的字符。由于区分大小写,因此将i标记添加到正则表达式的末尾。或者,可以使用未标记的[A-Za-z0-9]。+与前面的项目匹配一次或多次,因此该条目必须至少有一个非空白字母数字字符;否则,匹配失败。要使字段成为可选字段,您可以使用与前一项匹配超过0次的*量词。$匹配字符串的结尾。花时间掌握正则表达式绝对是一项值得的投资,因为它有助于解决您在编码时遇到的各种问题。希望这篇文章对你有用!