[JS高程] 字符串模式匹配方法
1. RegExp 对象
JS 中像其他语言一样,有正则表达式的支持,即RegExp对象。
该对象主要提供了两个对象方法,分别是:
exec()
test()
用法示例如下:
let str = "cat bat";
let exp = /.at/g;
exp.exec(str); // ['cat', index: 0, input: 'cat bat', groups: undefined]
exp.exec(str); // ['bat', index: 4, input: 'cat bat', groups: undefined]
exp.exec(str); // null
let str = "cat bat";
let exp = /.at/g;
exp.test(str); // true
更多参看这里 link
2. 字符串模式匹配方法
但是在处理字符串时,以上方法并不常用,取而代之,String
类型专门为在字符串中实现模式匹配设计了几个方法。
match()
;search()
;replace()
;
2.1 match()
, search()
其中, match()
和 search()
方法的使用较为类似。 二者的使用示例如下:
let str = "cat, bat, sat, hat";
let pt = /.at/g;
let result = str.match(pt);
console.log(result);
/*
[
"cat",
"bat",
"sat",
"hat"
]
*/
let str = "cat, bat, sat, hat";
let pt = /.at/g;
let result = str.search(pt);
console.log(result); // 0
这两个方法都是接受一个参数, 是一个 正则表达式字符串,或者RegExp 对象。
所不同的是, match()
返回被匹配的项, 如果是/g
匹配模式,则返回一组包含所有匹配项的数组,否则,返回第一个匹配的到的子串, 其返回解雇结果和exec()
的执行结果相同。 而search()
的返回结果则是首个匹配项的索引值,如果没有匹配项则返回-1
。
2.2 replace()
重点的需要熟悉replace()
方法, 这是最常用的方法
为了简化子字符串替换操作,ECMAScript 提供了 replace() 方法。 这个方法接收两个参数,第一个参数可以是一个RegExp对象,或者一个字符串(这个字符串不会转换为正则表达式),第二个参数可以是一个字符串或者一个函数。
也就是,repalce()
方法可以单纯的用于替换字符串中的子串,也可以用以替换匹配模式匹配的目标子串。
替换子字符串,示例:
let str = "cat, bat, sat, hat";
let result = str.replace("at","hello");// chello, bat, sat, hat
️ 注意: 如果第一个参数是字符串,那么只会替换第一个子字符串。要是想替换所有的子字符串,第一个参数必须为正则表达式并且开启了全局匹配模式。
替换正则匹配项,示例:
let str = "cat, bat, sat, hat";
let pt = /at/g;
let result = str.replace(pt,"hello");
console.log(result);// chello, bhello, shello, hhello
2.2.1 第二个参数为字符串的应用情况
第二个参数是字符串的情况下,有几个特殊的字符序列,可以用来插入正则表达式操作的值。
字符序列 | 替换文本 |
---|---|
$$ |
$ |
$& |
匹配整个模式的子字符串。等同RegExp.lastMatch |
$' |
匹配的子字符串之前的字符串。 —— RegExp.rightContext |
$` |
匹配的子字符串之后的字符串。 —— RegExp。leftContext |
$n |
匹配第 n 个捕获组的子字符串, n ( 0~9 ), 若没有捕获组,值为空串。 |
$nn |
匹配第 nn 个捕获组, nn (01~99), 若没有捕获组,值为空串。 |
以下示例说明:
let str = "I love the moment you smile";
let exp = /I (love (the moment(you)) smile/
该实例中,将会有三个捕获组:
$$
str.replace(exp,"$$"); // 将匹配到的子串替换为 `$` 符号
// '$'
️ 注意: 尽管是存在捕获组,但是因为整个模式就能匹配完整的源字符串, 还是直接全部被替换为了 $
符号。
$&
str.replace(exp,"$&"); // 'I love the moment you smile'
$'
、$`
str.replace(exp,"$'"); // ''
str.replace(exp,"$`"); // ''
// "I love the moment you smile "为首个完整匹配,其左侧,右侧都是空字符
$n
、$nn
str.replace(exp,"$1"); //'love the moment you'
str.replace(exp,"$2"); //'the moment'
str.replace(exp,"$3"); //'you'
注意:
以上执行的含义是, 将第二个参数中的字符串,替换掉源字符串中被第一个参数(pattern)所匹配命中的子字符串。
以上的示例中,
$'
,$`
的输出都是空串,以及$$
直接返回$
的原因是,$&
作为整个pattern 命中结果,已经和源字符串相同了,即整个完整的字符串被命中。 如果做以下修改,结果将不同:let str = 'I love the moment you smile';let exp = /love (the moment (you))/;str.replace(exp,"$$")// 'I $ smile'str.replace(exp,"$'")// 'I smile smile'str.replace(exp,"$`")// 'I I smile'
所以, 一点小结: 当字符串方法replace()
的第二个参数为字符串时, replace()
方法的替换目标是 $&
以上述示例来描述,就是 字符串 "I love the moment you smile" 的原始值包装对象提供的replace()
方法, 在通过正则表达式/love (the moment (you))/
来进行内容替换时, 将会以整个pattern(表达式)匹配到的子串为目标,即 “love the moment you” 为替换目标,也就是$&
。 并无关于pattern 中是否有捕获组。
2.2.2 第二个参数为函数的应用情况
根据是否有捕获组,表现不同
replace()
方法第二个参数还支持函数, 目的是用于更加灵活的替换规则,拓展捕获组的使用需求等。
该函数根据第一个参数中(pattern) 是否具有捕获组,函数的传递参数也不同:
- 没有捕获组时 : 函数收到3个参数 :①. 与整个模式匹配的字符串 ②. 匹配项在字符串中的开始位置 ③. 整个字符串
- 有捕获组时 : 每个匹配捕获组的字符串都会作为参数传给这个函数,但是最后两个参数,依旧是 整个匹配模式开始的位置 和 原始字符串。 因此参数的个数时不确定的,为
n + 2
以下是一些示例:
示例1 :没有捕获组:
示例2 : 只有一个捕获组:
示例3 : 有多个捕获组:
第二个参数为函数时的字符串替换示例:
示例1:
function htmlEscape(text) { return text.replace(/[<>"&]/g, function(match, pos, originalText) { switch(match) { case "<": return "<"; case ">": return ">"; case "&": return "&"; case "\"": return """; } }); } console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>")); // "<p class="greeting">Hello world!</p>"
这个地方存在一个疑问:
不知道当Pattern 中含有捕获组的时候要怎么去处理, 例如:
let str = "i always love the way you lie";let exp = /always (love) the way (you) lie/;let res = str.replace(exp, function (...args) { for (let i = 0; i < args.length; i++) { if (args[i] === "love") { return "hate"; } else if (args[i] === "you") { return "she"; } }});console.log(res); //i hate
期望是将源字符串中的 "love"->"hate", "you" -> "she" 。
[JS高程] 字符串模式匹配方法的更多相关文章
- JS常用字符串处理方法应用总结
这篇文章主要总结了JS常用字符串的处理方法,需要的朋友可以参考下 1.indexOf()方法,从前往后查找字符串位置,大小写敏感,从0开始计数.同理,lastIndexOf() 方法从后往前,两个 ...
- js中字符串的方法
js String对象中常用方法小结,需要的朋友可以参考下: 1.charCodeAt方法返回一个整数,代表指定位置字符的Unicode编码. strObj.charCodeAt(index) 说明: ...
- js常用字符串处理方法
JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...
- js截取字符串的方法
1,slice(a, b) 第一个参数表示起始位置,第二个表示截取到但不包含 关于参数正负问题,只要记住一点:永远不能倒着截取!否则返回空字符串 2,substring(a, b) 第一个参数表示起始 ...
- js的字符串charAt()方法
//字符中的字符从左向右进行索引,由0开始,字符串中的空格也算在内 var string = "charAt find word position"; document.write ...
- js 把字符串当做方法执行
<SCRIPT LANGUAGE="JavaScript"> function test(str){ alert(str); } eval('test("aa ...
- RegExp实例方法和字符串的模式匹配方法的总结
RegExp实例方法 ECMAScript通过RegExp类型来支持正则表达式,创建正则表达式有两种方式: //使用字面量形式定义正则表达式 var pattern1 = /[bc]at/i //使用 ...
- Js高程笔记->引用类型
1 . Object 对象 2 . Array 对象 : 检测方法:ES5 : isArray 转换方法: toLocaleString , toString , val ...
- js中A包含B的写法与分割字符串的方法
在java中A包含B的写法 if(A.contains(B)){ ... } 在js中没有contains方法,应该使用下面这种方法: var an = "传染性.潜伏性.破坏性" ...
随机推荐
- 熊猫分布密度制图(ArcPy实现)
一.背景 大熊猫是我国国家级珍惜保护动物,熊猫的生存必须满足一定槽域(独占的猎食与活动范围)条件.因此,科学准确的分析熊猫的分布情况,对合理制定保护措施和评价保护成效具有重要意义. 二.目的 通过练习 ...
- Frida-RPC调用
Python Frida RPC 调用示例 JS_CODE var base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrs ...
- 巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
- elasticsearch的dsl查询
测试es的dsl查询,准备数据,在插入数据的时候,如果index.type.mapping都没有,es会自动创建 一.数据的准备 curl -XPOST "http://192.168.99 ...
- spring cloud hystrix的隔离策略和dashboard
随着服务的拆分,各个服务有着明确的职责,服务之间通过轻量级的协议进行通讯.但有时候我们完成一个功能需要同时调用多个微服务,比如完成订单的创建,那么获取用户信息需要调用用户微服务,获取商品信息需要调用商 ...
- 大厂面试题系列:重载(Overload)和重写(Override)的区别。重载的方法能否根据返回类型进行区分
面试题:重载(Overload)和重写(Override)的区别.重载的方法能否根据返回类型进行区分 面试官考察点猜想 这道题纯粹只是考查基础理论知识,对实际开发工作中没有太多的指导意义,毕竟编辑器都 ...
- str数组
- c++中virtual 虚函数
转载: https://www.cnblogs.com/weiyouqing/p/7544988.html 在面向对象的C++语言中,虚函数(virtual function)是一个非常重要的概念. ...
- Centos7 误删除bin/sbin之类的恢复
参考连接:https://blog.csdn.net/weixin_41843733/article/details/107468767 挂载对应版本的光盘进入急救模式,复制已经丢失的命令到/mnt/ ...
- 自定义容器tomcat应用
看不懂可以先去看:https://www.cnblogs.com/leihongnu/p/14506704.html 1.将103服务器上的mytomcat镜像打包为mytomcat.gz(花时间比较 ...