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正则表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 优化innerHTML操作(提高代码执行效率)

    优化innerHTML操作(提高代码执行效率)

    多数现代浏览器都实现了innerHTML操作,它的方便性让我们爱不释手,但如果使用不当,很容易出现效率问题,本文通过一个例子来说明如何优化innerHTML操作。
    2011-08-08
  • JavaScript通如何过RGraph实现动态仪表盘

    JavaScript通如何过RGraph实现动态仪表盘

    这篇文章主要介绍了JavaScript通如何过RGraph实现动态仪表盘,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 微信小程序使用picker组件出现的问题探究

    微信小程序使用picker组件出现的问题探究

    这篇文章主要介绍了微信小程序自定义可搜索的picker组件,主要包括自定义可搜索的picker组件的代码以及调用实例,这里的搜索框使用的是vant微信小程序组件库,picker使用的微信小程序的原生组件,需要的朋友可以参考下
    2023-01-01
  • js输入框邮箱自动提示功能代码实现

    js输入框邮箱自动提示功能代码实现

    一个输入框当我输入任何字的时候自动下拉相应的邮箱提示,在输入框输入11的时候下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱,下面实现这个自动提示功能
    2013-12-12
  • 微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

    微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

    这篇文章主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧滑动,右侧不动菜单功能相关实现技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • EditPlus注册码生成器(js代码实现)

    EditPlus注册码生成器(js代码实现)

    在线的EditPlus注册码生成器,看了看还真是,在这里exe的注册机病毒太多,纯js的在线注册机可就放心了,感兴趣的各位可以参考下哈,希望可以帮助到你
    2013-03-03
  • document.open() 与 document.write()的区别

    document.open() 与 document.write()的区别

    document.open() 与 document.write()的区别...
    2007-08-08
  • JavaScript利用el-table实现绘制热度表

    JavaScript利用el-table实现绘制热度表

    这篇文章主要为大家详细介绍了JavaScript如何利用el-table实现绘制热度表,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • javascript中的作用域和闭包详解

    javascript中的作用域和闭包详解

    这篇文章主要向大家介绍了javascript中的作用域和闭包,以及利用js闭包实现循环绑定事件,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 在JavaScript中实现类的方式探讨

    在JavaScript中实现类的方式探讨

    在 javascript 中有很多方式来创建对象,所以创建对象的方式使用起来非常灵活,到底哪一种方式是最恰当呢?下面为大家讲讲
    2013-08-08

最新评论