详解JavaScript中的正则表达式

打游戏也要有梦想 2021-05-04 10:48:23
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

版权声明
本文为[打游戏也要有梦想]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/ywjbokeyuan/p/14696605.html

  1. JS: event flow
  2. Front end performance optimization: rearrangement and redrawing
  3. JS - deep and shallow copy
  4. JavaScript异步编程3——Promise的链式使用
  5. JavaScript asynchronous programming 3 -- chain use of promise
  6. Vue.js组件的使用
  7. The use of vue.js component
  8. How to judge whether a linked list has links
  9. Element UI custom theme configuration
  10. Text image parallax effect HTML + CSS + JS
  11. Spring的nohttp宣言:消灭http://
  12. Vue3 intermediate guide - composition API
  13. Analysis of URL
  14. These 10 widgets that every developer must know
  15. Spring's nohttp Manifesto: eliminate http://
  16. Learn more about JS prototypes
  17. Refer to await to JS to write an await error handling
  18. A short article will directly let you understand what the event loop mechanism is
  19. Vue3 uses mitt for component communication
  20. Characteristics and thinking of ES6 symbol
  21. Two way linked list: I'm no longer one-way driving
  22. Vue event and form processing
  23. Reactive TraderCloud实时外汇开源交易平台
  24. Reactive tradercloud real time foreign exchange open source trading platform
  25. Node.js REST API的10个最佳实践
  26. Ten best practices of node.js rest API
  27. Fiddler advanced usage
  28. Process from Vue template to render
  29. Promise up (asynchronous or synchronous)
  30. Principle and implementation of promise
  31. Vs code plug in sharing - run code
  32. Vue practical notes (1) introduction of Ant Design
  33. Vue actual combat notes (2) introduction of element plus
  34. Introduction to webpack
  35. Webpack construction process
  36. Vue notes
  37. The experience and lessons of moving from ruby megalith architecture to go microservice
  38. Using leancloud to add artitalk module to hexo blog
  39. Implementation of chrome request filtering extension
  40. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  41. Gallop workflow engine design series 01 process element design
  42. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  43. Vue Mobile Music App learning [16]: player lyrics display development
  44. jquery cookie
  45. jquery cookie
  46. 体面编码之JavaScript
  47. JavaScript for decent coding
  48. React17 系统精讲 结合TS打造旅游电商平台
  49. React17 system combined with TS to build tourism e-commerce platform
  50. 2021-05-04 hot news
  51. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  52. gRPC-Web:替代REST的gRPC的Javascript库包
  53. The relationship between httpsession object and cooike and the construction of cookie object
  54. Grpc Web: a JavaScript library package to replace rest grpc
  55. Building reactive rest API with Java - kalpa Senanayake
  56. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  57. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  58. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  59. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  60. Vue.js比jQuery更容易学习