摘要: 玩转正则表达式。

Fundebug经授权转载,版权归原作者所有。

正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。

匹配正则

使用 .test() 方法

  1. let testString = "My test string";
  2. let testRegex = /string/;
  3. testRegex.test(testString);

匹配多个模式

使用操作符号 |

  1. const regex = /yes|no|maybe/;

忽略大小写

使用i标志表示忽略大小写

  1. const caseInsensitiveRegex = /ignore case/i;
  2. const testString = 'We use the i flag to iGnOrE CasE';
  3. caseInsensitiveRegex.test(testString); // true

提取变量的第一个匹配项

使用 .match() 方法

  1. const match = "Hello World!".match(/hello/i); // "Hello"

提取数组中的所有匹配项

使用 g 标志

  1. const testString = "Repeat repeat rePeAT";
  2. const regexWithAllMatches = /Repeat/gi;
  3. testString.match(regexWithAllMatches); // ["Repeat", "repeat", "rePeAT"]

匹配任意字符

使用通配符. 作为任何字符的占位符

  1. // To match "cat", "BAT", "fAT", "mat"
  2. const regexWithWildcard = /.at/gi;
  3. const testString = "cat BAT cupcake fAT mat dog";
  4. const allMatchingWords = testString.match(regexWithWildcard); // ["cat", "BAT", "fAT", "mat"]

用多种可能性匹配单个字符

  • 使用字符类,你可以使用它来定义要匹配的一组字符
  • 把它们放在方括号里 []
  1. //匹配 "cat" "fat" and "mat" 但不匹配 "bat"
  2. const regexWithCharClass = /[cfm]at/g;
  3. const testString = "cat fat bat mat";
  4. const allMatchingWords = testString.match(regexWithCharClass); // ["cat", "fat", "mat"]

匹配字母表中的字母

使用字符集内的范围 [a-z]

  1. const regexWidthCharRange = /[a-e]at/;
  2. const regexWithCharRange = /[a-e]at/;
  3. const catString = "cat";
  4. const batString = "bat";
  5. const fatString = "fat";
  6. regexWithCharRange.test(catString); // true
  7. regexWithCharRange.test(batString); // true
  8. regexWithCharRange.test(fatString); // false

匹配特定的数字和字母

你还可以使用连字符来匹配数字

  1. const regexWithLetterAndNumberRange = /[a-z0-9]/ig;
  2. const testString = "Emma19382";
  3. testString.match(regexWithLetterAndNumberRange) // true

匹配单个未知字符

要匹配您不想拥有的一组字符,使用否定字符集 ^

  1. const allCharsNotVowels = /[^aeiou]/gi;
  2. const allCharsNotVowelsOrNumbers = /[^aeiou0-9]/gi;

匹配一行中出现一次或多次的字符

使用 + 标志

  1. const oneOrMoreAsRegex = /a+/gi;
  2. const oneOrMoreSsRegex = /s+/gi;
  3. const cityInFlorida = "Tallahassee";
  4. cityInFlorida.match(oneOrMoreAsRegex); // ['a', 'a', 'a'];
  5. cityInFlorida.match(oneOrMoreSsRegex); // ['ss'];

匹配连续出现零次或多次的字符

使用星号 *

  1. const zeroOrMoreOsRegex = /hi*/gi;
  2. const normalHi = "hi";
  3. const happyHi = "hiiiiii";
  4. const twoHis = "hiihii";
  5. const bye = "bye";
  6. normalHi.match(zeroOrMoreOsRegex); // ["hi"]
  7. happyHi.match(zeroOrMoreOsRegex); // ["hiiiiii"]
  8. twoHis.match(zeroOrMoreOsRegex); // ["hii", "hii"]
  9. bye.match(zeroOrMoreOsRegex); // null

惰性匹配

  • 字符串中与给定要求匹配的最小部分
  • 默认情况下,正则表达式是贪婪的(匹配满足给定要求的字符串的最长部分)
  • 使用 ? 阻止贪婪模式(惰性匹配 )
  1. const testString = "catastrophe";
  2. const greedyRexex = /c[a-z]*t/gi;
  3. const lazyRegex = /c[a-z]*?t/gi;
  4. testString.match(greedyRexex); // ["catast"]
  5. testString.match(lazyRegex); // ["cat"]

匹配起始字符串模式

要测试字符串开头的字符匹配,请使用插入符号^,但要放大开头,不要放到字符集中

  1. const emmaAtFrontOfString = "Emma likes cats a lot.";
  2. const emmaNotAtFrontOfString = "The cats Emma likes are fluffy.";
  3. const startingStringRegex = /^Emma/;
  4. startingStringRegex.test(emmaAtFrontOfString); // true
  5. startingStringRegex.test(emmaNotAtFrontOfString); // false

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

匹配结束字符串模式

使用 $ 来判断字符串是否是以规定的字符结尾

  1. const emmaAtBackOfString = "The cats do not like Emma";
  2. const emmaNotAtBackOfString = "Emma loves the cats";
  3. const startingStringRegex = /Emma$/;
  4. startingStringRegex.test(emmaAtBackOfString); // true
  5. startingStringRegex.test(emmaNotAtBackOfString); // false

匹配所有字母和数字

使用\word 简写

  1. const longHand = /[A-Za-z0-9_]+/;
  2. const shortHand = /\w+/;
  3. const numbers = "42";
  4. const myFavoriteColor = "magenta";
  5. longHand.test(numbers); // true
  6. shortHand.test(numbers); // true
  7. longHand.test(myFavoriteColor); // true
  8. shortHand.test(myFavoriteColor); // true

除了字母和数字,其他的都要匹配

\W 表示 \w 的反义

  1. const noAlphaNumericCharRegex = /\W/gi;
  2. const weirdCharacters = "!_$!!";
  3. const alphaNumericCharacters = "ab283AD";
  4. noAlphaNumericCharRegex.test(weirdCharacters); // true
  5. noAlphaNumericCharRegex.test(alphaNumericCharacters); // false

匹配所有数字

你可以使用字符集[0-9],或者使用简写 \d

  1. const digitsRegex = /\d/g;
  2. const stringWithDigits = "My cat eats $20.00 worth of food a week.";
  3. stringWithDigits.match(digitsRegex); // ["2", "0", "0", "0"]

匹配所有非数字

\D 表示 \d 的反义

  1. const nonDigitsRegex = /\D/g;
  2. const stringWithLetters = "101 degrees";
  3. stringWithLetters.match(nonDigitsRegex); // [" ", "d", "e", "g", "r", "e", "e", "s"]

匹配空格

使用 \s 来匹配空格和回车符

  1. const sentenceWithWhitespace = "I like cats!"
  2. var spaceRegex = /\s/g;
  3. whiteSpace.match(sentenceWithWhitespace); // [" ", " "]

匹配非空格

\S 表示 \s 的反义

  1. const sentenceWithWhitespace = "C a t"
  2. const nonWhiteSpaceRegex = /\S/g;
  3. sentenceWithWhitespace.match(nonWhiteSpaceRegex); // ["C", "a", "t"]

匹配的字符数

你可以使用 {下界,上界} 指定一行中的特定字符数

  1. const regularHi = "hi";
  2. const mediocreHi = "hiii";
  3. const superExcitedHey = "heeeeyyyyy!!!";
  4. const excitedRegex = /hi{1,4}/;
  5. excitedRegex.test(regularHi); // true
  6. excitedRegex.test(mediocreHi); // true
  7. excitedRegex.test(superExcitedHey); //false

匹配最低个数的字符数

使用{下界, }定义最少数量的字符要求,下面示例表示字母 i 至少要出现2次

  1. const regularHi = "hi";
  2. const mediocreHi = "hiii";
  3. const superExcitedHey = "heeeeyyyyy!!!";
  4. const excitedRegex = /hi{2,}/;
  5. excitedRegex.test(regularHi); // false
  6. excitedRegex.test(mediocreHi); // true
  7. excitedRegex.test(superExcitedHey); //false

匹配精确的字符数

使用{requiredCount}指定字符要求的确切数量

  1. const regularHi = "hi";
  2. const bestHi = "hii";
  3. const mediocreHi = "hiii";
  4. const excitedRegex = /hi{2}/;
  5. excitedRegex.test(regularHi); // false
  6. excitedRegex.test(bestHi); // true
  7. excitedRegex.test(mediocreHi); //false

匹配0次或1次

使用 ? 匹配字符 0 次或1次

  1. const britishSpelling = "colour";
  2. const americanSpelling = "Color";
  3. const languageRegex = /colou?r/i;
  4. languageRegex.test(britishSpelling); // true
  5. languageRegex.test(americanSpelling); // true

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

JS常用正则表达式备忘录的更多相关文章

  1. js常用正则表达式,滚蛋吧!你们测试组bug,让你挑

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. js常用正则表达式2

    字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. -或- 对 ...

  3. js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...

  4. js常用正则表达式表单验证代码

    方法一:  var re=/正则表达式/;  re.test($("txtid").val())  方法二:  $("txtid").val.match(/正则 ...

  5. JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

    验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数 ...

  6. js常用正则表达式汇总

    常用的前台正则表达式汇总. 1.手机号验证 手机格式以1开头,现有的手机格式一般为13.14.15.17.18等 var regMobile = /^1[34578]\d{9}$/; //或者为/^1 ...

  7. 前端js常用正则表达式实例讲解

    本文内容整理自他人优秀的博客,非纯原创.仅借此学习和整理. 1.匹配用户名 规则描述: 长度4-6位: {4,16} 字母: [a-z] [A-Z] 数字: [0-9] 下划线: [_] 减号: [- ...

  8. js 常用正则表达式分析详解

    1.整数或者小数:/^((0{1}|[1-9]{1}[0-9]+)\.{1}[0-9]+|[1-9]{1}[0-9]*|0)$/ 分析:分类讨论,如果是小数,则有两种形式   0.111对应的是 0{ ...

  9. JS常用正则表达式大全

    转载自:http://blog.csdn.net/lun379292733/article/details/8169807/ <script type="text/JavaScript ...

随机推荐

  1. FineReport启动后访问404

    近期将FineReport以嵌入式方式部署在Tomcat8上,启动服务后,点击导出下载出现HTTP ERROR 404情况: 百思不得其解啊,纠结了好几天: 后查看原部署Tomcat6服务器的cata ...

  2. 并行(Parallelism)与并发(Concurrency)

    并行(Parallelism):多任务在同一时刻运行.例如,多个任务在多核处理器上运行. 并发(Concurrency):两个或者两个以上的任务在一段时间内开始.运行.完成,这意味着它们不是在同一时刻 ...

  3. sql server 高可用故障转移(4)

    二台sql服务器配置ISCSI虚拟磁盘 在上篇我们利用ISCSI Target软件在DC-ISCSCI上创建了三个ISCSI虚拟磁盘,在下面我们将为大家介绍SQL-CL01(hsr1 50)和SQL- ...

  4. pymongo的使用

    利用python操作mongodb需要导入pymongo库   pip install pymongo 1.连接mongodb     import pymongo     client = pymo ...

  5. websocket(一)--握手

    最近在琢磨怎么实现服务端的消息推送,因为以前都是通过客户端请求来获取信息的,如果需要实时信息就得轮询,比如通过ajax不停的请求. websocket相当于对HTTP协议进行了升级,客户端和服务端通过 ...

  6. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  7. Android 框架炼成 教你如何写组件间通信框架EventBus

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41096639 ,本文出自:[张鸿洋的博客] 1.概述 关于Eventbus的介绍 ...

  8. 关于Google 圆角 高光 高宽 自适应 按钮

    最近看了张鑫旭老师关于Google搜索按钮的博客,感觉启示颇多.下面我就详说一下这个按钮的代码,由于W3C新版本的更新,之前的代码会有部分累赘, 在此,我做了些修改.当然,想观摩原版的可以,狠狠的戳链 ...

  9. 第一个vue示例-高仿微信

    这时我学习vue写的第一个demo,因为以前学过angular,所以这次看vue的时候是先写demo,在写的过程中遇到不会的在看书的方式学习的,因为是针对性学习,所以可以快速的对vue有个大概的认识, ...

  10. infolite(中文检索系统)~爬虫利器

    infolite 今天为大家分享一个爬虫利器-infolite.这是一个chrome浏览器的插件,如果你在写爬虫的时候对复杂繁琐的控件路径分析是深恶痛绝.那么infolite绝对是你最好的选择. 安装 ...