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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
在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 用数组降低程序的时间复杂度
2009/12/04 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python for和else语句趣谈
2019/07/02 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
优秀大学生自荐信
2014/06/09 职场文书
2015入党自传书范文
2015/06/26 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android