JavaScript中正则表达式的实际应用详解

 更新时间:2021年05月06日 10:22:28   作者:打游戏也要有梦想  
这篇文章主要给大家介绍了关于JavaScript中正则表达式实际应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

实际工作中,JavaScript正则表达式还是经常用到的。所以这部分的知识是非常重要的。

一、基础语法:

第一种:字面量语法

var expression=/pattern/flags;

第二种:RegExp构造函数语法

var pattern = /\w/gi;  //字面量语法
var pattern = new RegExp('\\w', 'gi');//构造函数语法,这两者是等价的

这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种。

其中的flags有3个标志

g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;

i:表示不区分大小写模式,即在确定匹配项时忽略模式与字符串的大小写;

m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。

当然还有其他的flags,用到的极少,不做过多阐述。

至于以上的\w什么意思,稍等,请继续往下看。

二、方法

主要有test(),search(),match(),replace()。当然还有其它的很多方法,不作阐述,毕竟用到的很少。

1、test()方法的使用

判断某个字符串中是否含有相应的字符串

2、search()方法的使用

搜索相应的字符串第一次出现的索引位置,如果未找到,则返回-1

3、match()方法的使用

返回匹配的数组

4、replace()方法的使用,这个用到的还是非常多的

匹配相应的字符串,然后将其替换成其他字符串

三、匹配表达式跟实战

1、断言:

所谓的断言呢,就是表示一个匹配在某些条件下发生。总之呢,概念有点绕,直接看下文。待我慢慢续来。

字符 描述
^ 匹配开头
$ 匹配结尾
\b 匹配单词的边界
\B 匹配非单词的边界

举个例子

我要匹配一个字符串,开头到结尾是dog,忽略大小写

var pattern = /^dog$/i;//忽略大小写

console.log(pattern.test('dog'));//true
console.log(pattern.test('sdfdog'));//false
console.log(pattern.test('dog56'));//false
console.log(pattern.test('dOG'));//true
var pattern = /\b\w+/g;//全局匹配,这里的+,是量词,代表1次或者多次

console.log('Hello World'.match(pattern));//输出['Hello','World'],这里就是match用法,返回匹配的数组。

在这里,说下,\b是匹配单词的边界,那么\B是匹配非单词的边界。一个小写,一个大写,大写是反义。那么不必我多说了吧。

再说下单词边界,可能很多人都不太清楚单词边界

我稍微解释下啊,比如说,Hello World单词边界有四个,分别是H位置,o位置,W位置,d位置

2、字符类:

元字符 描述
. 查找单个字符,除了换行和行结束符
\w 查找单词字符,相当于[A-Za-z0-9_]
\W 查找非单词字符,相当于[^A-Za-z0-9_]
下面的反义便不再罗列出来了。
\d 查找数字,相当于[0-9]
\s 查找空白字符
\0 查找NULL字符
\n 查找换行符
\f 查找换页符
\r 查找回车符
\t 查找制表符
\v 查找垂直制表符

3、范围:

字符 描述
[abc] 匹配a,b,c中的任意一个字符
[^abc] 匹配不是a,b,c中的任意一个字符
[0-9] 匹配0-9任意范围的数字,同理[a-z]匹配a-z任意范围的字符
[a-z] 匹配a到z之间的任意一个字符
x|y 匹配x或者y

4、量词:

字符 描述
n+ 匹配任何包含至少一个字符n的字符串
n* 匹配任何包含零个或多个n的字符串
n? 匹配任何包含零个或者一个n的字符串
n{x} 匹配包含x个n的字符串
n{x,y} 匹配最少x个,最多y个n的字符串

四、拓展

匹配10-36之间的数字

var pattern = /1[2-9]|[2-3][0-9]|4[0-6]/;//12-46

console.log(pattern.test(11));//false
console.log(pattern.test(12));//true
console.log(pattern.test(20));//true
console.log(pattern.test(36));//true
console.log(pattern.test(46));//true
console.log(pattern.test(47));//false

将'Hello,World!Hello'中的Hello替换成Welcome

这里主要是强调一下replace方法在正则中的使用,因为这个在实际中用到的还是非常多的。后面的flags中的g,加上跟不加上有着很大的区别的。

var pattern = /Hello/g;

var oldString = 'Hello,World!Hello';
var newString = oldString.replace(pattern, 'Welcome');
console.log(newString);//Welcome,World!Welcome

总结

到此这篇关于JavaScript中正则表达式的实际应用的文章就介绍到这了,更多相关JavaScript正则表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在layui中layer弹出层点击事件无效的解决方法

    在layui中layer弹出层点击事件无效的解决方法

    今天小编就为大家分享一篇在layui中layer弹出层点击事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • BootStrap实现带关闭按钮功能

    BootStrap实现带关闭按钮功能

    这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 微信小程序实现九宫格抽奖

    微信小程序实现九宫格抽奖

    这篇文章主要为大家详细介绍了微信小程序实现九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • javascript代码编写需要注意的7个小细节小结

    javascript代码编写需要注意的7个小细节小结

    每种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,与大家分享。
    2011-09-09
  • js中的原生网络请求解读

    js中的原生网络请求解读

    这篇文章主要介绍了js中的原生网络请求解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • js CSS3实现卡牌旋转切换效果

    js CSS3实现卡牌旋转切换效果

    这篇文章主要为大家详细介绍了js CSS3实现卡牌旋转切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    昨天群里面的朋友问了个比较有意思的问题,keydown,keyup,keypress事件的先后顺序。
    2009-02-02
  • JavaScript时间对象之常用方法的设置实例

    JavaScript时间对象之常用方法的设置实例

    这篇文章主要为大家介绍了JavaScript时间对象常用方法的设置实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • 常用的javascript function代码

    常用的javascript function代码

    一些javascript常见函数,方便当作学习参考
    2008-05-05

最新评论