资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/正则 理解这些点就够了

正则 理解这些点就够了

X_AirDu / 3397人阅读

摘要：不是完全的正则手册，只记录一些重要的容易有误解的点定义正则表达式通过字面量形式或构造函数形式定义或一般使用字面量形式，构造函数形式用在正则表达式在运行时才能确定下的情况例如另一方面字符串中反斜杠有别的含义要想表示等要使用两个反斜杠来转义反斜

不是完全的正则手册，只记录一些重要的,容易有误解的点
定义

正则表达式通过字面量形式或RegExp构造函数形式定义

const pattern=/d/g
//或
const pattern = new RegExp("d","g")

一般使用字面量形式，构造函数形式用在正则表达式在运行时才能确定下的情况,例如

function hasClass(ele, classname) {
    const pattern = new RegExp("(^|s)" + classname + "(s|$)")
    return pattern.test(ele.className)
}

另一方面:字符串中反斜杠有别的含义,要想表示d等要使用两个反斜杠来转义d*

反斜杠

在正则表达式中反斜杠有重要的含义

是用来转义有特殊含义的字符，比如 [、^、.

要想只匹配.com 需要 /.com/.test(".com")

预定的字符类以开始，比如 d w s

而在字符串中反斜杠同样是一个转义字符，n r t

要想在字符串中表示需要两个 

new RegExp("[w.]").toString()=="/[w.]/"
()、[]与|

[]:集合操作符，表示一系列字符的任意一个

例如:/[abc]/ 表示a、b、c中的任意一个能匹配就可以了

对于/[a|b]/呢？

一个常见的误区是感觉/[a|b]/表示要匹配a或者b,其实是a、b或者|中的任意一个

/[a|b]/.test("|") === true

/(a|b)/.test("|") ===false

从上面可以看到，圆括号中的|是或的意思,表示要匹配()以|分割的两边的整体，注意是整体

例子：

/(abc|abd)/.test("ab") ===false
/(abc|abd)/.test("abc") ===true
/(abc|abd)/.test("abd") ===true
分组和捕获

上面只是介绍了圆括号中存在|时需注意的点，这里重点说一下圆括号

在正则中,圆括号有两种含义，一是用来分组，一是用来捕获想要的值

分组

（)结合* ？ + {} 使用时，是对圆括号内的整体进行repeat

/(ab)+/ 匹配一个或多个ab

/(ab)+|(cd)+/ 匹配一个或多个 ab或cd

捕获

捕获是一个强大的功能，也是很多时候我们使用正则的原因，同样以()来表示

例子:找出样式中的透明度值



function getOpacity(elem) {
    var filter = elem.style.filter;
    if(filter){
        return filter.indexOf("opacity=") >= 0 ?(parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100) + "" : "" 
    }
    return elem.style.opacity
}

捕获主要结合exec()、match() 和 g标记使用，下面介绍

需要强调的是，因为分组和捕获一样使用(),所以，在一个正则表达式中既有用于分组的(),也有用于捕获的()时，对于分组部分，可以加上?:,这样，结果集就只包含我们想要捕获的部分

例子

"
hahahahah
".match(/(<[^>]+>)([^<]+)/)
> [ 
hahahahah , 
 , hahahahah ] //两个捕获

如果我们只对标签内的文本感兴趣

"
hahahahah
".match(/(?:<[^>]+>)([^<]+)/)
> [ 
hahahahah , hahahahah ] //对于
,我们不关心，就不要了

说到?: 就要提一下长得差不多的 ?= 和 ?!

?= 表示后面必须跟着某些东西,并且结果中不包含?=指定的部分，并且不捕获

?= 表示后面必须不跟着某些东西

对比看一下

/a(?:b)/.exec("abc")
> ["ab", index: 0, input: "abc"] //注意匹配的是"ab"

/a(?=b)/.exec("abc")
> ["a", index: 0, input: "abc"] //注意匹配的只是"a"

再看个例子,数字字符串转千分位

function formatNumber(str) {
  return str.replace(/B(?=(d{3})+$)/g, ",")
}
formatNumber("123456789")
> 1,234,567,890

解释:

B表示除了字符串首字母之前的边界，比如1和2之间的边界，2和3之间的边界等

后面()中的?=(d{3})+$表示上面提到的那些边界后面必须跟着3N个数字直到字符串尾部

g表示全局匹配，即每个上面说的边界都要检测2，如果符合，replace把边界替换成,

exec()、match()与g标记的故事

exec()和match()都是返回数组，结果集中包含捕获的内容

在正则中不包含g时，exec()和match()返回的结果集是一样的，数组中依次是 整个匹配的字符串、依次的（）指定的要捕获的部分

在有g的时候

match()返回的数组中的每一项是依次匹配到的整体字符串，不包含每个匹配中捕获到的内容

对比来看

"p123 q123".match(/[a-z]+(d+)/)
> ["p123", "123", index: 0, input: "p123 q123"]

"p123 q123".match(/[a-z]+(d+)/g)
> ["p123", "q123"]

可以看到加上g后，返回的数组就只有匹配项了

那么，即想匹配全部，又想获取到捕获怎么办呢？

使用while结合exec()

let pattern=/[a-z]+(d+)/g
let str="p123 q123"
let match
while((match=pattern.exec(str)) !=null){
    console.log(match)
}

> ["p123", "123", index: 0, input: "p123 q123"]
  ["q123", "123", index: 5, input: "p123 q123"]
replace()

对于字符串的replace方法,重点说一下，接受的第二个参数，可以是一个函数

对于str.replace(/xxxxx/g,function(){})

函数在每次前面的正则匹配成功时都会执行，函数的参数依次是，完整的匹配文本、依次的捕获部分、当前匹配的索引、原始字符串

"border-bottom-width".replace(/-(w)/g,(match,capture)=>{
    return capture.toUpperCase()
})
> "borderBottomWidth"

喜欢的给个star,github,谢谢

云服务器 GPU云服务器 儿就够 篇就够 如果这些数据统计 对这些不太明白

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90655.html

相关文章

  • 正则 理解这些点就够了

    摘要：不是完全的正则手册，只记录一些重要的容易有误解的点定义正则表达式通过字面量形式或构造函数形式定义或一般使用字面量形式，构造函数形式用在正则表达式在运行时才能确定下的情况例如另一方面字符串中反斜杠有别的含义要想表示等要使用两个反斜杠来转义反斜 不是完全的正则手册，只记录一些重要的,容易有误解的点 定义 正则表达式通过字面量形式或RegExp构造函数形式定义 const pattern=/...

    huhud 评论0 收藏0

  • 中小型企业如何做好电子邮件营销？做好这4点就够了！

    摘要：一些电邮营销的工具，如摩杜云，可以帮你设计个性化的新闻邮件欢迎邮件及通知邮件针对每一个订阅的客户。在一些电邮营销平台，如摩杜云，企业可以获得电邮活动及订阅者活动的数据。现如今，许多企业会通过多种渠道及工具来进行网络营销，提高品牌知名度和销售量。但做网络营销，最好的方式之一就是电子邮件营销，这个强大的工具能加强品牌与客户的联系，提供消费者的参与度。那么，中小型企业如何做好电子邮件营销呢？下面就...

    chavesgu 评论0 收藏0

  • JS正则表达式入门，看这篇就够了

    摘要：如果遇到非常的复杂的匹配，正则表达式的优势就更加明显了。关于正则表达式书写规则，可查看，上面说的很清楚了，我就不贴出来了。替换与正则表达式匹配的子串，并返回替换后的字符串。结语正则表达式并不难，懂了其中的套路之后，一切都变得简单了。 前言 在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个浏览器可以识别的规则，有了这个规则，浏览器就可以帮我们判断...

    wenzi 评论0 收藏0

  • 提高代码可读性,掌握这些就够了

    摘要：提高代码可读性掌握这些就够了今天看到一篇关于代码优化的文章写得十分实用在学习总结后梳理出思维结构图将收货的分享一下原作者方应杭原文地址注意这篇文章所指的代码优化特指的是代码可读性方面的一些写法优化而不是指的性能优化。 提高代码可读性,掌握这些就够了 今天看到一篇关于代码优化的文章,写得十分实用,在学习总结后,梳理出思维结构图,将收货的分享一下 原作者:方应杭 原文地址:https://...

    khs1994 评论0 收藏0

发表评论

登陆后可评论

0条评论

X_AirDu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<