全文共4719字，预计学习时长14分钟
来源：Pexels
正则表达式已经成为程序员的必备工具。几乎所有流行的编程语言都支持正则表达式，原因如下：正则表达式为开发人员提供了强有力的工具，使之能快速执行需要几十行代码才能完成的任务。
本文主要研究前端开发人员经常要面对的六大文本处理和操作任务，并进一步了解正则表达式如何简化这一过程。但也只是触及了正则表达式潜力之皮毛。
1. 将URL转换为链接假设文本中有一个或多个URL，且均不是HTML锚元素，因此不能单击。要将url自动转换为链接，首先需要找到URL，然后用指向URL的<a>的href属性将每个URL装入标签<a>…</a>：
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的数字
来源：Pexels
4.用单个空白替换多个空白当呈现网页时，重复的空白字符将显示为单个空白。然而，有时需要清理用户输入或其他数据，并将重复的空白替换为单个空白。下面将演示如何使用正则表达式实现这一点:
const str = " My opinions may have changed, but not the fact that I'mright."; // Ashleigh Brilliantstr.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、快速开发和无限合作。轻松将可重用组件导入至任何项目中，使用并更新以实现跨存储库同步更改。
示例:搜索在bit.dev上共享的React组件
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。
· $ 匹配字符串的末尾.
来源：Pexels
花时间掌握正则表达式绝对是一项值得的投资，因为它将有助于解决编码时遇到的各种问题。
希望这篇文章对你有用!
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范
,
