JavaScript RegExp 对象用法详解


Posted in Javascript onSeptember 24, 2019

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

1.基本用法

<script>
  // 创建正则
  var reg = /hello/
  // 检测某个字符串是否有符合正则格式的文本
  var flag = reg.test("hello world")
  console.log(flag) // true
</script>

2.修饰符

修饰符用于执行区分大小写和全局匹配

i 不区分大小写

g 全局匹配

<script>
  // 默认会区分大小写
  var reg = /hello/
  var flag = reg.test("Hello World")
  console.log(flag) // false
  // 添加i修饰符 不区分大小写
  var reg2 = /hello/i
  var flag2 = reg2.test("Hello World")
  console.log(flag2) // true

  var str = "I'm in a bad mood, really bad"
  // 默认非全局匹配
  var reg3 = /bad/
  var newStr = str.replace(reg3,"good")
  // 只替换了一个bad
  console.log(newStr) // I'm in a good mood, really bad
  // 全局匹配
  var reg4 = /bad/g
  var newStr2 = str.replace(reg4,"good")
  // 替换了全局的bad为good
  console.log(newStr2) // I'm in a good mood, really good

  // 同时使用
  var reg5 = /bad/gi
</script>

3.元字符

元字符是拥有特殊含义的字符:

. 查找单个字符,除了换行和行结束符。(通俗的说是任意字符)

  • \d 匹配数字0-9
  • \D 匹配非数字
  • \s 匹配任意空白字符(不局限空格)
  • \S 匹配非空白字符
  • \w 元字符用于查找单词字符。(单词字符包括:a-z、A-Z、0-9,以及下划线)
  • \W 元字符用于查找非单词字符。

4.方括号

方括号用于查找某个范围内的字符

  • [abc] 匹配中括号中存在的一个字符(a,b,c中的一个)
  • [^abc] 匹配中括号中不存在的一个字符(除a,b,c中以外的字符)
  • [0-9] 查找任何从 0 至 9 的数字。
  • [a-z] 查找任何从小写 a 到小写 z 的字符。
  • [A-Z] 查找任何从大写 A 到大写 Z 的字符。
  • [A-z] 查找任何从大写 A 到小写 z 的字符。

5.量词

  • \d{6} 匹配6个数字
  • \d{4,6} 匹配4到6个数字
  • \d{4,} 匹配至少4个数字
  • ? 0或1 超出1个不匹配
  • + 至少1个
  • * 0个或多个

.*会尽可能的匹配更长的字符(贪婪)

.*?会尽可能的匹配更短的字符(禁止贪婪)

\d{4,6} 会尽可能的匹配更长的字符(贪婪)

\d{4,6}? 会尽可能的匹配更短的字符(禁止贪婪)

6.边界匹配

^n 匹配任何开头为 n 的字符串。

n$ 匹配任何结尾为 n 的字符串。

7.实例

匹配手机号

var reg = /^1\d{10}$/;

匹配QQ号

var reg = /^[1-9]\d{4,10}$/;

匹配身份证号

var reg = /^[1-9]\d{16}[Xx\d]$/;

变量名检测(只能由字母,数字,下划线组成,且不能以数字开头,长度6-15)

var reg = /^[A-z_]\w{5,14}$/;

8.相关方法

test():检测正则表达式是否能在指定字符串中查找到匹配的文本

<script>
  var str = "hi66morning77"
  // 匹配连续的3个数字
  var reg = /\d{3}/
  console.log(reg.test(str)) // false
  // 匹配连续的7个小写字母
  var reg2 = /[a-z]{7}/
  console.log(reg2.test(str)) // true
</script>

match():查找字符串,将符合正则表达式规则的文本以数组形式返回,如果没有指定全局匹配,则只查找一次。找不到就返回null

<script>
  var str = "hi66morning77"
  // 匹配连续的2个数字 非全局匹配
  var reg = /\d{2}/
  console.log(str.match(reg)[0]) // 66
  // 匹配连续的2个数字 全局匹配(推荐)
  var reg2 = /\d{2}/g
  console.log(str.match(reg2)) // ["66", "77"]  
</script>

search():返回目标自字符串第一次出现的索引值(所以全局匹配被忽略)

<script>
  var str = "hi66morning77"
  // 匹配连续的2个数字 非全局匹配
  var reg = /\d{2}/
  console.log(str.search(reg)) // 2
  // 匹配a,b,m中的一个
  var reg2 = /[abm]/
  console.log(str.search(reg2))  // 4   
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue远程加载sfc组件思路详解
Dec 25 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 #Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 #Javascript
关于layui时间回显问题的解决方法
Sep 24 #Javascript
Vue之Mixins(混入)的使用方法
Sep 24 #Javascript
JavaScript Array对象使用方法解析
Sep 24 #Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 #Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 #Javascript
You might like
重新认识php array_merge函数
2014/08/31 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
JS之相等操作符详解
2016/09/13 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
长青弘远的面试题
2012/06/09 面试题
小学校园之星事迹材料
2014/05/16 职场文书
中职生求职信
2014/07/01 职场文书
班级团队活动方案
2014/08/14 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
实训报告范文大全
2014/11/04 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
戒赌保证书
2015/05/11 职场文书
党支部季度考核意见
2015/06/02 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Java实现简单小画板
2022/06/10 Java/Android