Javascript中正则表达式的应用详解

 更新时间:2022年02月18日 09:21:27   作者:爱学习的ljz  
这篇文章主要为大家详细介绍了Javascript中正则表达式的应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

正则表达式 在前端中的应用也是比较常见的,我们在有时候也需要 用js 对某些字符串进行查找\捕获 或者 替换. js 中正则表达式 一般应用在string类型和 RegExp 两种类型中。

string

search

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

'Hello World!'.search(/world/i);  // 6  返回匹配出的第一个字符串的开始位置索引,
//与 indexOf 方法类似,但是 search方法 可以支持 正则表达式,功能更加强大  

replace

修改某个字符串 将内容中的某个子串 替换为其他内容,可以支持字符串替换,也支持正则表达式替换,建议正则表达式替换,功能会更加强大。返回值为替换处理完成的字符串

// 1. 最简单的应用,world 替换为 ljz
'Hello World!'.replace(/world/i,'ljz'); // 返回值('Hello ljz!') i模式可以忽略大小写
// 2 如果要替换 的字符串为动态字符串,并且可能包含特殊符号 比如 '?' 这样构造正则表达式,
//如果包含特殊符号会影响正则匹配,会有可能匹配不到,所以可以考虑使用字符串替换.
// 如下,要将src属性为指定值 的 标签 加上classname属性为 ‘aaaImg'
const str = '/aaa/bbb?fileid=111';
'<img src="/aaa/bbb?fileid=111" ><h2>123</h2><p>444</p>'.replace(`src="${str}"`,`src="${str}" className="aaaImg"`);
// 返回值('<img src="/aaa/bbb?fileid=111" className="aaaImg" ><h2>123</h2><p>444</p>')
// 3. 上述情况如果只适用于替换一个字符串,如果我要替换的串是有多个呢,有两种解决思路, 一是可以继续使用字符串替换,可以使用replaceAll方法,用法与repalce相同,但是可以进行全部替换,ie浏览器不支持repalceAll方法,如果要考虑兼容ie ,那就只能考虑第二种方式了。
// 使用正则表达式,正则表达式有全局模式,可以支持全部替换,就是需要对要构造正则表达式的动态字符串进行处理一下,避免特殊符号影响匹配的情况。
// 可以先对  动态字符串进行转码,在对要处理的字符串进行转码处理,然后进行全局替换,替换完成再进行解码还原字符串就可以了。
'<img src="/aaa/bbb?fileid=111" ><h2>123</h2><p>444</p><img src="/aaa/bbb?fileid=111" >';
const regExp = new RegExp(encodeURIComponent('src="/aaa/bbb?fileid=111"'),'g'); 
const data = encodeURIComponent(dataStr).replace(regExp, decodeURIComponent('src="/aaa/bbb?fileid=111 className="aaaImg"'));
decodeURIComponent(data);  // 返回值('<img src="/aaa/bbb?fileid=111 className="aaaImg" ><h2>123</h2><p>444</p><img src="/aaa/bbb?fileid=111 className="aaaImg" >')

match:

string.match(regexp);可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。规定要匹配的模式的RegExp对象。如果该参数不是RegExp对象,则需要首先把它传递给RegExp构造函数,将其转换为RegExp 对象,返回值为一个数组,里面存放匹配出的各项字符串。

var str=”The rain in SPAIN stays mainly in the plain ;
var n=str.match(/ain/gi); // 输出结果: ain,AlN,ain,ain ,match与 下面exec方法类似,只不过match是字符串的方法,exec是 正则表达式的方
法。

RegExp

JavaScript中,RegExp对象是一个预定义了属性和方法的正则表达式对象

test:

用于检测一一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回false。

const reg = new RegEx//jz/);
reg.test(hello ljz!); // true

exec:

用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为null。

// 最基本匹配
const reg1 = new RegExp(/
ljz)d+); // 匹配ljz后面携带数字的串
reg1.exec('cmasklnvjksdfbnk12345
6cdsnjkvbsdfhjjz123vbfsdhj)[0]; // 123

//捕获对应的字符串
// ()会把每个分组里的匹配的值保存起来,exec得到一一个数组,此时捕获分组会把匹配到的值保存起来,从数组下标[1]开始依次存储
// [^]表示以此结束的串([^"]*) 就可以是捕获分组以"结束的串
const reg2 = new RegExp(/id="([^"]*/); //要捕获标签字符串中的id属性值
reg2.exec("<img id=\"cFF2vAMVq" src=\"/aaa/bbb\"/>');//返回数组。0为匹配到的字符串('d="cFF2vAMVq'),1为要捕获的串('cFF2vAMVq')

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 原生js实现俄罗斯方块

    原生js实现俄罗斯方块

    这篇文章主要为大家详细介绍了原生js实现俄罗斯方块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Bootstrap多级导航栏(级联导航)的实现代码

    Bootstrap多级导航栏(级联导航)的实现代码

    这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下
    2016-03-03
  • js实现跨域的多种方法

    js实现跨域的多种方法

    这篇文章主要介绍了js实现跨域的多种方法,主要介绍了js实现跨域的5种方法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 彻底理解JavaScript的原型与原型链

    彻底理解JavaScript的原型与原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,这篇文章主要给大家介绍了关于JavaScript原型与原型链的相关资料,需要的朋友可以参考下
    2021-10-10
  • 浅谈pc端rem字体设置的问题

    浅谈pc端rem字体设置的问题

    下面小编就为大家带来一篇浅谈pc端rem字体设置的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 前端React Nextjs中的TS类型过滤实用技巧

    前端React Nextjs中的TS类型过滤实用技巧

    今天就来介绍一个在其它开源库中见到的既花里胡哨,又实用的TS类型——TS类型过滤,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验
    2022-04-04
  • javascript在子页面中函数无法调试问题解决方法

    javascript在子页面中函数无法调试问题解决方法

    遇到在子页面中提交的时候会无法能够调试javascript代码的情况出现,下面有个不错的解决方法,希望对大家有所帮助
    2014-01-01
  • 全面解析Bootstrap表单样式的使用

    全面解析Bootstrap表单样式的使用

    这篇文章主要介绍了bootstrap表单样式的使用,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • javascript单页面手势滑屏切换原理详解

    javascript单页面手势滑屏切换原理详解

    这篇文章主要为大家详细介绍了javascript单页面手势滑屏切换原理,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • html+css+js实现别踩白板小游戏

    html+css+js实现别踩白板小游戏

    大家好,本篇文章主要的讲的是html+css+js实现别踩白板小游戏,感兴趣的同学赶快来看一看吧,觉得不错的话可以收藏一下哦,方便下次浏览
    2021-11-11

最新评论