超好用的6种正则表达式,前端开发人员必知

时间: 2020-02-23阅读: 935标签: 正则

正则表达式已经成为程序员的必备工具。几乎所有流行的编程语言都支持正则表达式,原因如下:正则表达式为开发人员提供了强有力的工具,使之能快速执行需要几十行代码才能完成的任务。

本文主要研究前端开发人员经常要面对的六大文本处理和操作任务,并进一步了解正则表达式如何简化这一过程。但也只是触及了正则表达式潜力之皮毛。


1. 将URL转换为链接

假设文本中有一个或多个URL,且均不是html锚元素,因此不能单击。要将url自动转换为链接,首先需要找到URL,然后用指向URL的 的href属性将每个URL装入标签 … :

const str = "Visit https://en.wikipedia.org/ for moreinfo.";
str.replace(/\b(https?|ftp|file):\/\/\S+[\/\w]/g, '<ahref="$&">$&</a>'); 
// => "Visit <ahref="https://en.wikipedia.org/">https://en.wikipedia.org/</a> for more info."

注意:使用该正则表达式时要小心,因为它不会匹配以标点符号结尾的URL,也可能无法匹配更复杂的URL。

下面来看看其原理:

  • \b 在被称为“单词边界”的位置进行匹配。
  • (https?|ftp|file) 匹配字符“https”,或“http”,或“ftp”,或“file”
  • : 按字面意义匹配冒号字符
  • \/ 按字面意义匹配正斜杠字符
  • \S 匹配除空白之外的单个字符
  • + 与前一项匹配一次或多次
  • [\/\w] 匹配正斜杠或单词字符。如果没有这个,该正则表达式将匹配URL结尾的任何标点符号。
  • g 命令正则表达式引擎匹配所有出现的项而不是在首次匹配后即停止
  • $& 在replace()的第二个参数中,将匹配的子字符串插入到替换字符串中


2. 删除重复的单词

文章和教程包含不必要的重复单词并不少见。即使是专业作家也要为这些错误进行校对。在谷歌新闻上简单地搜索“the”,就会发现数百家知名新闻机构的文章中都有重复的“the”。幸运的是,正则表达式可以用一行代码修复这个问题:

const str = "This thissentence has has double words.";
str.replace(/\b(\w+)\s+\1\b/gi, '$1');
//=> "This sentence has double words." 
  • \b 在“单词边界”的位置进行匹配(后跟或前接ASCII字母、数字或下划线的位置)。
  • \w 匹配单词字符(ASCII字母、数字或下划线)
  • + 与前一项匹配一次或多次
  • \s 匹配空白字符
  • + 将前一项匹配一次或多次,以便能够检测到含多个空白字符的重复单词
  • \1 反向引用和匹配的文本是否与第一对括号中匹配的文本相同
  • \b 匹配单词边界
  • g 命令正则表达式引擎匹配所有出现的项而不是在首次匹配后即停止
  • i 使搜索不区分大小写(忽略大小写差异)
  • $1 在replace()的第二个参数中插入第一对括号中匹配的文本


3. 从文件名中去除无效字符

在提供要下载的文件时,文件名中不应包含某些字符。例如,在Windows操作系统中,以下字符在文件名中无效,应删除:

  • <(小于)
  • > (大于)
  • : (冒号)
  • “ (双引号)
  • / (正斜杠)
  • \ (反斜杠)
  • | (竖线)
  • ? (问号)
  • * (星号)

使用正则表达式删除无效字符非常简单。来看一个例子:

const str ="https://en.wikipedia.org/";
str.replace(/[<>|:"*?\\/]+/g,''); // =>"httpsen.wikipedia.org" 

[], 被称为字符类,可匹配方括号之间的一个字符。因此,通过将所有无效字符放在其中并在正则表达式的末尾添加一个全局(g)标志,可从字符串中有效删除这些字符。

注意,在字符类中,反斜杠具有特殊含义,必须用另一个反斜杠进行转义:\\。操作符+重复字符类,以便同时替换无效字符序列,这有助于提升性能。可省略它而不影响结果。

请记住,除非想用另一个字符替换无效字符,否则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,'file'); 

基本上,这段代码命令正则表达式引擎替换str中的字符(若其构成由竖线字符(|)分隔的单词之一)。本例中不能使用空字符串作为第二个参数,因为文件没有名称。

注意,若字符串包含任何附加字符,则不会被替换。例如,“con”会被替换,但“concord”不会,这是一个有效的文件名。这是通过在正则表达式中使用^和$来实现的。^匹配字符串的开头,可确保在要匹配的字符串之前没有其他字符。$匹配字符串的结尾。

也可以使用字符类采用更紧凑的方式编写该正则表达式:

str.replace(/^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i,'file'); 

[1–9]匹配1-9的数字

4.用单个空白替换多个空白

当呈现网页时,重复的空白字符将显示为单个空白。然而,有时需要清理用户输入或其他数据,并将重复的空白替换为单个空白。下面将演示如何使用正则表达式实现这一点:

const str = " My opinions may have changed, but not the fact that I'mright."; // Ashleigh Brilliant
str.replace(/\s\s+/g,' ');// => " My opinions may have changed, but not the fact that I'mright." 

该正则表达式仅包含两个元字符、一个操作符和一个标记:

  • \s 匹配单个空白字符,包括ASCII空格、制表符、换行符、回车符、垂直制表符和表单换行符
  • \s 再次匹配单个空白字符
  • + 与前一项匹配一次或多次
  • g 命令正则表达式引擎匹配所有出现的项而不是在首次匹配后即停止

结果是替换所有重复至少两次的空白字符。请注意,上面示例中的结果在开头仍然有一个应删除的空白字符。为此,只需将trim()函数添加到语句的末尾:

str.replace(/\s\s+/g, '').trim();// => "My opinions may have changed, but not the fact thatI'm right." 

请记住,此代码使用空格(U+0020)字符替换任何类型的空白字符,包括ASCII空格、制表符、换行符、回车符、垂直制表符和表单换行符。因此,如果回车紧跟在制表符之后,那么它们将被一个空格代替。若这不是目的所在,只想替换相同类型的空白,可用下面的代码代替:

str.replace(/(\s)\1+/g,'$1').trim(); 

\1 是一个反向引用,并与第一对括号(\s)中匹配的字符匹配。可在replace()的第二个参数中使用$1替换它们,它插入了在括号中匹配的字符。


5. 寻找包含特定单词的句子

假设你想匹配文本中包含特定单词的所有句子。或者你想在搜索结果中突出显示这些句子,又或者想将其从文本中删除。正则表达式/[^.!?]*\bword\b[^.!?]*.?/gi可实现以上需求。以下是其原理:

const str = "The apple treeoriginated in Central Asia. It is cultivated worldwide. Apple matures in latesummer or autumn."; 
// en.wikipedia.org/wiki/Apple// find sentences that contain the word"apple" 
str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi);// => ["The apple treeoriginated in Central Asia.", "Apple matures in late summer orautumn."] 

下文将逐步研究该正则表达式:

  • [^.!?] 匹配所有除 ., !,及?以外的字符
  • * 匹配前一项的零个或多个序列
  • \b 在“单词边界”的位置进行匹配(后跟或前接ASCII字母、数字或下划线的位置)。
  • apple 按字面匹配字符(因为它区分大小写,所以将i标记添加到该正则表达式的末尾)
  • \b 匹配单词边界
  • [^.!?] 匹配所有除 .,!,及?以外的字符
  • * 匹配前一项的零个或多个序列
  • 匹配除换行符以外的所有字符
  • ? 匹配前一项出现零次或一次的项
  • g 命令正则表达式引擎匹配所有出现的项而不是在首次匹配后即停止
  • i 使搜索不区分大小写

提示:使用Bit (Github)从代码库中“获取”组件,逐步构建UI组件库。与团队一起使用该UI组件库,以获得一致UI、快速开发和无限合作。轻松将可重用组件导入至任何项目中,使用并更新以实现跨存储库同步更改。


6. 将用户输入限制为字母数字字符

网页开发时的一个常见任务是将用户输入限制为字母数字字符(A - z、A - z和0-9)。使用正则表达式实现这个任务非常简单:使用一个字符类来定义允许的字符范围,然后在其上添加一个量词来指定可以重复的字符的数量:

const input1 = "John543";  
const input2 = ":-)";/^[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。
  • $ 匹配字符串的末尾.

花时间掌握正则表达式绝对是一项值得的投资,因为它将有助于解决编码时遇到的各种问题。

希望这篇文章对你有用!

原文 http://developer.51cto.com/art/202002/611090.htm
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/7568

js常用正则表达式验证大全(整理详细且实用)

正则表达式对象用来规范一个规范的表达式,本文讲的是JS正则表达式大全(整理详细且实用),包括校验数字、字符、一些特殊的需求等等

前端正则表达式书写

/正则表达式/修饰符/i (忽略大小写),/g (全文查找出现的所有匹配字符),/m (多行查找),/gi(全文查找、忽略大小写),/ig(全文查找、忽略大小写),不写修饰符默认只匹配一个

JavaScript 正则表达式的 5 个方法

现在 JavaScript 非常强大,可以用它做很多事情,移动应用程序、网站、网络应用程序、游戏,甚至可以包括人工智能。JavaScript 生态系统有很多脚本库和框架,可以用它来做什么事情。

javascript正则表达式:匹配所有html标签

这个正则表达式也是收集于网络,但是我可以看懂,首先,html标签肯定是以<符号开始的,以>符号结束(不管是不是自闭合),只是中间有点纠结,可能有字符,数字,引号,换行符——但是,却万万没有>,因为有它的话html标签就结束了

一次记住js的6个正则方法

来记忆一些常用特殊字符,这个是正则本身的范畴了,是不是总觉得记不住?其实我也记不住,每次都是去搜索和online验证来完成一些任务。我也困恼过,其实最后还是因为自己写的少吧,唯手熟尔。。。

Javascript正则中的命名捕获分组

命名捕获分组还有一个好处,那就是假如你在修改一个正则时,在已有分组的左边引入了新的分组,那么你还得记得更新已有的反向引用的数字。命名捕获分组自身的语法是 (?<name>...)

正则匹配身份证有bug你知道么?

在开发中,我们需要验证用户的输入信息,多半采用正则验证,下面就是身份证证号的几种常用的正则表达式:但是这些并不能管用,是不是很气人?这是为什么呢?

JS常用正则表达&RegExp对象

本来想细致整理一下正则表达式和RegExp对象的,但是发现网上完善的教程一抓一大把,于是这篇文章只会记录一些常常用到的正则表达式以及稍做分析。

密码强度的正则表达式(JavaScript)总结

本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定。

循环下的正则匹配?说说正则中的lastIndex

正则有一个属性叫lastIndex,它表示正则下一次匹配时的起始位置。一般情况下我们是使用不到它的,但在正则中包含全局标志g时,正则的test和exec方法就会使用到它

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!