您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

10句话看懂 JavaScript 正则表达式

时间:2019-10-16 11:55:31  来源:  作者:

1,正则表达式会去查找字符串中符合某个模式的部分,在 JAVAScript 中,正则表达式的创建方法是放在一对"/"之间,或者用 newRegExp(),随后再调用 match,test 或者 replace 方法。

你可以事先定义正则表达式,也可以在调用方法时直接定义:

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

2,使用 match方法,一次匹配一个字符或者将多个字符放入方括号 []中以捕获任何匹配的字符,使用连字号 -来捕获特定范围的字符:

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

3,在正则表达式末尾添加可选的修饰符来定义表达式的匹配方式,在 JS 中,我们的修饰符有:

  • i:大小写不敏感(case insensitive)
  • m:多行匹配(multi line matching)
  • g:全局匹配(global match)
Web 开发:10句话看懂 JavaScript 正则表达式

 

  •  

4,在开始出插入符号 ^表示匹配位置在字符串开头,在正则末尾插入符号 $表示匹配位置在字符串结尾,现在可以开始将多个匹配条件组合起来匹配更长的字符串:

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

5,使用通配符和特殊转义字符来匹配较长的字符串。

.:除换行以外的任何字符

d:数字

D:非数字

s:空格

S:非空格

n:新行

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

6,仅匹配特定数量的字符,量词缩写

?:相当于{0,1},表示有匹配的或者没有匹配的;

+:相当于{1, },表示至少匹配一次;

{3}:表示刚好出现了3次;

{2,4}:表示出现了2-4次;

*:相当于{0,},也就是出现包括0在内的任意次。

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

7,使用圆括号 ()为字符串分组,match 方法会返回被匹配的字符串以及符合匹配条件的部分,除非在正则表达式中加入修饰符 g。在括号中使用 |符号来实现多选分支,|相当于“或”:

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

8,需要匹配特殊字符时,使用反斜杠 转义。JS 正则表达式中的特殊字符是 ^$ .*+?()[]{}|,因此在需要匹配一个星号时,应该写作 *而不是 *:

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

9,需要匹配排除某个字符以外的字符时,在方括号中使用 ^字符进行排除字符组, ^在这里相当于是求反,但记住在之前的第4点中,它还有“字符串开始”的意思,所以一定要正确书写。

 

Web 开发:10句话看懂 JavaScript 正则表达式

 

 

10,正则表达式可以被用于查找和匹配各种各样的内容,包括 url 和文件名,然而如果你在尝试将正则表达式用于更加复杂的内容,比如解析电子邮件(比你想象的更复杂)或者是解析 html(记住html并不是一门常规的语言,它并不能被正则表达式完全解析)时,请务必谨慎小心。

正则表达式的水远比这篇文章深,比如我们并没有讲到贪婪匹配惰性匹配先行断言(lookahead)捕获等内容,但上面所总结的内容是 web 开发者在日常工作中最常用的一些功能与写法,想要看看一些复杂的正则表达式实例就请期待我们下一次的推送吧!



Tags: JavaScript 正则表达式   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1,正则表达式会去查找字符串中符合某个模式的部分,在 JavaScript 中,正则表达式的创建方法是放在一对"/"之间,或者用 newRegExp(),随后再调用 match,test 或者 replace 方法。你可...【详细内容】
2019-10-16  Tags: JavaScript 正则表达式  点击:(78)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条