专栏首页终身学习者周末在学习正则,学习过程中发现这 6 个方便的正则表达式

周末在学习正则,学习过程中发现这 6 个方便的正则表达式

作者:Faraz Kelhini 译者:前端小智 来源:medium

点赞再看,养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

几乎所有流行的编程语言都支持正则表达式,因为正则实在是太强大了,它能让我们原本需要数十行代码才能完成的,正则大哥一行就能搞定了。

在本文中,我们将研究前端开发人员经常必须处理的6个文本处理和操作,并了解正则表达式是如何简化这个过程的。

查找包含特定单词的句子

假设我们想要匹配文本中包含特定单词的所有句子。 因为需要在搜索结果中显示这些句子,或者想从文本中删除它们。 正则表达式/[^.!?]*\bword\b[^.!?]*.?/gi可以帮我们做到这一点。如下所示:

const str = "The apple tree originated in Central Asia. It is cultivated worldwide. Apple matures in late summer or autumn."

// 查找包含单词“ apple”的句子
str.match(/[^.!?]*\bapple\b[^.!?]*.?/gi)

// 输出结果
// => ["The apple tree originated in Central Asia.", "Apple matures in late summer or autumn."]

接着,我们来此正则表达式含义:

  • [^.!?] 表示匹配任务字符,除了 ., !?
  • *匹配[^.!?]结果的 0 次或者多次
  • \b 匹配单词的边界
  • apple 就是匹配apple(因为它区分大小写,我们在正则表达式的末尾添加i标志)
    • \b 匹配单词的边界
  • [^.!?] 表示匹配任务字符,除了 ., !?
  • *匹配[^.!?]结果的 0 次或者多次
  • .匹配任何字符,除了换行
  • ?匹配.所匹配到的结果的 0 次或者 1 次
  • g 告诉正则表达式引擎匹配所有匹配项,而不是在第一次匹配后停止
  • i 使搜索不区分大小写

从文件名中去除无效字符

下载的文件时,其名称中不应包含某些字符。 例如,在 Windows 中,以下字符在文件名中无效,应将其删除:

  • <
  • >
  • :
  • /
  • \
  • |
  • ?
  • *

使用正则表达式,去除无效字符非常简单。让我们看一个例子

const str = "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 之间的数字。

用单个空格替换多个空格

当网页渲染时,重复的空格字符被显示为单个空格。 但是,有时我们希望用户输入或其他数据中包含的多个空格,我们只想用用单个空格来表示。 使用正则表达式可以很简单的做到这点:

const str = "  My    opinions may  have changed,    but not the fact that I'm right."

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

此正则表达式仅包含两个元字符,一个运算符和一个标志位:

  • \s匹配单个空格字符,包括ASCII空格,制表符,换行符,回车符,垂直制表符和换页符
  • \s 再次匹配一个空格字符
  • +与上一项匹配一次或多次,也就是匹配一个或多个空格
  • g 告诉正则表达式引擎匹配所有匹配项,而不是在第一次匹配后停止

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

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

// => "My opinions may have changed, but not the fact that I'm right."

请记住,此代码用空格(U + 0020)字符替换任何类型的空格字符,包括ASCII空格,制表符,换行符,回车符,垂直制表符和换页符。 因此,如果回车符紧跟在制表符之后,它们将被空格替换。 如果这不是我们的意图,并且只想替换相同类型的空格,请改用以下代码:

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

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

限制用户只能输入数字或字母

Web开发过程中的一项常见表单操作就是限制用户输入。比如,我们想将用户限制为数字或者字母。同样,使用正则,很简单就能做到:使用字符类定义允许的字符范围,然后在其后附加一个量词以指定可以重复的字符数:

const input1 = "John543";
const input2 = ":-)";
/^[A-Z0-9]+$/i.test(input1);    // → true
/^[A-Z0-9]+$/i.test(input2);    // → false

运作方式如下:

  • ^匹配字符串的开头,它确保没有其他字符出现在我们要匹配的字符串之前。
  • [A-Z0–9]匹配介于AZ之间或介于09之间的字符。由于这是区分大小写的,因此我们将i标志,表示忽略大小写。 或者,我们也可以使用 [A-Za-z0–9]来代替。
  • + 匹配一次或多次。 因此,输入必须至少包含一个非空白的字母数字字符; 否则,匹配失败。 如果要使该字段为可选字段,则可以使用*量词,该量词与前面的项匹配零次或多次。
  • $匹配字符串的结尾。

将网址变成链接

假设我们在文本中有一个或多个不是 HTML 锚元素的网址,因此无法点击。 我们希望将 URL 自动转换为链接。 为此,我们首先需要找到 URL,然后将每个 URL 包裹在<a>…</a>标记中,并使用<a>href属性指向该URL

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

// => "Visit <a href="https://en.wikipedia.org/">https://en.wikipedia.org/</a> for more info."

来看看这段代码是如何工作的:

  • \b匹配单词边界的位置
  • (https?|ftp|file) 匹配字符httpshttpftpfile
  • : 从字面上匹配冒号
  • \/ 从字面上匹配正斜杠字符
  • \S 匹配任何非空格的单个字符
  • + 匹配上一项一次或多次
  • [\/\w] 匹配正斜杠或单词字符。 如果没有这个,则正则表达式将匹配URL末尾的所有标点符号
  • g告诉正则表达式引擎匹配所有匹配项,而不是在第一次匹配后停止
  • $&replace() 的第二个参数中,将匹配的子字符串插入替换字符串中

删除重复的单词

有时,我们会发现有的文章单词重复了,如果通过遍历来去重,就很麻烦。幸运的是,正则仅用一行代码就能解决此问题:

const str = "This this sentence has has double words."

str.replace(/\b(\w+)\s+\1\b/gi, '$1')

// => "This sentence has double words."
  • \b 匹配单词的边界
  • \w 匹配单词字符
  • + 匹配上一项的一次或多次
  • \1 是一个反向引用,它表示在第一对括号中所匹配的文本
  • \b 匹配单词边界
  • g 告诉正则表达式引擎匹配所有匹配项,而不是在第一次匹配后停止
  • i 忽略大小写
  • $1 表示分组的第一个文本内容

总结

正则表达式已成为任何程序员必备的技能之一。 在本文中,我们研究了前端开发人员如何利用正则表达式执行各种任务。 但是,我们只是挖掘了正则表达式一些基础面。

多花点时间来学习正则,我觉得这是很值得的,有时候我们遇到到很复杂的规则时,当你的有同事正大绞尽脑汁写着上百行的代码,你只用一句正则就能搞定,我相信,你的同事将对你刮目相看。 加油!!!


原文:https://code.tutsplus.com/tut...

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端练级攻略(第二部分)

    在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如何向界面添加交互性,JavaScript 设计和架构模式,以及如何构建网络应用程序。

    前端小智@大迁世界
  • 如何构建运行良好的Vue组件

    很少有人最初编写Vue组件时打算将其开源。我们大多数人都是从自己编写组件开始的——我们有一个问题,然后决定通过构建一个组件来解决它。有时我们发现自己想要在代码库...

    前端小智@大迁世界
  • 使用Vue 自定义文件选择器组件(基础虽简单,但思路我们要掌握)

    文件选择元素是web上最难看的 input 类型之一。它们在每个浏览器中实现的方式不同,而且通常非常难看。这里有一个解决办法,就是把它封装成一个组件。

    前端小智@大迁世界
  • grep命令及正则表达式

    grep基本概念 grep:global search regular expression and print out the line. 作用:文本过滤器,...

    小小科
  • 环保静音:智能机器人割草机Worx Landroid

    镁客网
  • python的系统模块builtins快

    python是简单的一门语言,是因为里面存在了很多的模块使用,就好如linux中的也有理解命令的使用“man”、“help”,而python也有。

    py3study
  • 全国计算机二级C知识点总结3

    1.while循环while后圆括号中表达式的值决定了循环体是否将被执行。因此,进入while循环后,一定要有能使此表达式的值变为0的操作,否则循环将会无限制地...

    用户6755376
  • DeforGAN:用GAN实现星际争霸开全图外挂!

    本文提出了 DefogGAN,这是一种推断即时战略(Real-Time Strategy,RTS)游戏中战争迷雾后的隐藏信息状态的生成式方法。给定一个部分可观测...

    机器之心
  • 解决timed out waiting for input: auto-logout问题

    为了增强linux系统的安全性,需要在用户输入空闲一段时间后自动断开,这个操作是TMOUT值来实现的。查看系统环境变量$TMOUT :

    Tyan
  • 基于Fast R-CNN的FPN实现方式及代码实现细节(未完待续)

    基于传统的方法,先要进行区域建议的生成,然后对每个区域进行手工特征的设计和提取,然后送入分类器。在Alexnet出现后,CNN的性能比较好,不但可以学习手工特征...

    于小勇

扫码关注云+社区

领取腾讯云代金券