javascript掌握正则表达式

2023-05-16

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

我想正则表达式之所以难,主要体现在以下几个方面:

1)正则表达式的符号晦涩难懂

2)不支持排版(至少javascript目前还不支持)

3)不能设置断点,不能跟踪调试

4)没有真正的标准,不同工具所支持的正则表达式有许多细节上的差异

正则表达式本质上是一整套的处理字符串的模型,帮助人们利用简短的表达式来实现复杂的算法。早期的正则表达式引擎只有三百多行代码,发展到后来也不到1万行代码。

打一个不恰当的比喻,利用正则表达式处理字符串,就像是利用SQL处理数据。正如我们在处理数据时要避免使用复杂SQL,我们在处理字符串时也应当避免使用复杂的正则表达式。

下面是一段判断IP地址合法性的代码,比单纯用正则表达式要简单:

var isIPAdress = function(IPStr){
      var pttrn = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;      
      var IPObj = pttrn.exec(IPStr);      
      var bool_result = false;      
      if(IPObj){          
      //添加进一步的识别规则          
      if(IPStr==="0.0.0.0"){          
          bool_result = false;          
       }else if(IPStr==="1.1.1.1"){      
           bool_result = false;          
       }else if(IPObj[1]>=0 && IPObj[1]<=255 && IPObj[2]>=0 
       && IPObj[2]<=255 && IPObj[3]>=0 && IPObj[3]<=255 && IPObj[4]>=0 && IPObj[4]<=255){             
            bool_result = true;         
        }else{           
             bool_result = false;        
         }    
   }       return bool_result;  
 }

调试信息:

isIPAdress("10.1.6.255")    true
isIPAdress("1.1.1.1")    false
isIPAdress("10.1.a.255")    false

浅议正则表达式的执行效率

执行下面这个javascript的正则表达式,比较ie/safari/firefox/chrome的执行效率,发现safari和firefox首次打开时较慢但是再刷新可做到瞬间完成,chrome和ie则是每次打开和刷新都慢,这说明javascript在ie和chrome上还是完全基于NFA算法做优化,safari和firefox则可能用到了DFA算法(也可能是缓存)。

var p1 = /X(?:.+)+X/;  
iJs.put(p1.exec("=XX=========================="));

正则表达式对象:exec方法:

如果正则表达式使用了g作为后缀,则会记住上次执行的结果,执行时会找后面匹配。

如果正则表达式没有使用g作为后缀,则每次执行的结果相同,都是取第一个匹配上的。如果使用了捕获型括号,则匹配结果可通过1/2/3/...后缀获得,参见前面给出的判断IP地址合法性的代码。

var pttrn = /bb/; 
iJs.showObject(pttrn.exec("abaabbaaa"));  
iJs.showObject(pttrn.exec("abaabbaaa"));  
pttrn = /a+/g;  
iJs.showObject(pttrn.exec("abaabbaaa"));  
iJs.showObject(pttrn.exec("abaabbaaa"));

调试信息:

[Object] bb
  |--[string] 0 ------------- bb
  |--[number] index ------------- 4
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 6
[Object] bb
  |--[string] 0 ------------- bb
  |--[number] index ------------- 4
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 6
[Object] a
  |--[string] 0 ------------- a
  |--[number] index ------------- 0
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 1
 [Object] aa
  |--[string] 0 ------------- aa
  |--[number] index ------------- 2
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 4

正则表达式对象:test方法

返回true或false

var pttrn = /bb/;  
iJs.pt('pttrn.test("abaabbaaa")');  
iJs.pt('pttrn.test("ababab")');

调试信息:

pttrn.test("abaabbaaa")    true
pttrn.test("ababab")    false

字符串对象:match方法

match方法返回一个对象,需注意如果正则表达式使用了后缀g,则捕获型括号会失效。

var pttrn = /a(b)+/;  
var pttrn_g = /a(b)+/g;  
var myStr = "abaabbaaa";  
var matchObj = myStr.match(pttrn);//捕获b  
var matchObj_g = myStr.match(pttrn_g); //捕获失效  
iJs.pt("pttrn");  
iJs.pt("pttrn_g");  
iJs.pt("myStr");  
iJs.showObject("matchObj");  
iJs.showObject("matchObj_g");

调试信息:

pttrn    /a(b)+/
pttrn_g    /a(b)+/g
myStr    abaabbaaa
[Object] matchObj
  |--[string] 0 ------------- ab
  |--[string] 1 ------------- b
  |--[number] index ------------- 0
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 2
[Object] matchObj_g
  |--[string] 0 ------------- ab
  |--[string] 1 ------------- abb
  |--[number] index ------------- 3
  |--[string] input ------------- abaabbaaa
  |--[number] lastIndex ------------- 6

字符串对象:replace方法

如果replace第一个参数输入的是字符串或不带后缀的正则表达式,则只匹配替换一次。

只有正则表达是带后缀g才能替换全部。
第二个参数可以是函数,下面的例子中打印了函数接受的参数结构。第一个参数是匹配字符串、第二个参数开始是捕获字符串、然后跟着index、最后是字符串自己。

var myStr = "abaabbaaabbb";  
var searchValue = "a";  
var searchRegExp = /a+/;  
var searchRegExp_g = /a+/g;  
var replaceValue = "X";  
iJs.pt("myStr");  
iJs.pt("searchValue"); 
iJs.pt("replaceValue");  
iJs.pt("myStr.replace(searchValue,replaceValue)");  
iJs.put("");   
iJs.pt("myStr"); 
iJs.pt("searchRegExp"); 
iJs.pt("replaceValue");  
iJs.pt("myStr.replace(searchRegExp,replaceValue)");  
iJs.put("");   
iJs.pt("myStr");  
iJs.pt("searchRegExp_g");  
iJs.pt("replaceValue");  
iJs.pt("myStr.replace(searchRegExp_g,replaceValue)");  
iJs.put("");   
var myStr_f = "a2aa22aaa222________";  
var searchRegExp_g2 = /(a+)2/g;  
var args;//全局变量便于iJs1捕获对象  
var replaceFunction = function(a,b){
      var slice = Array.prototype.slice;      
      args = slice.apply(arguments);      
      iJs1.showObject("args");      
      return args[0]+"+";  
    };  
iJs.pt("myStr_f.replace(searchRegExp_g2,replaceFunction)");

调试信息:

myStr    abaabbaaabbb
searchValue    a
replaceValue    X
myStr.replace(searchValue,replaceValue)    Xbaabbaaabbb
myStr    abaabbaaabbb
searchRegExp    /a+/
replaceValue    X
myStr.replace(searchRegExp,replaceValue)    Xbaabbaaabbb
myStr    abaabbaaabbb
searchRegExp_g    /a+/g
replaceValue    X
myStr.replace(searchRegExp_g,replaceValue)    XbXbbXbbb
myStr_f.replace(searchRegExp_g2,replaceFunction)    a2+aa2+2aaa2+22________

补充调试信息:

[Object] args
  |--[string] 0 ------------- a2
  |--[string] 1 ------------- a
   |--[number] 2 ------------- 0
  |--[string] 3 ------------- a2aa22aaa222________
[Object] args
  |--[string] 0 ------------- aa2
  |--[string] 1 ------------- aa
  |--[number] 2 ------------- 2
  |--[string] 3 ------------- a2aa22aaa222________
[Object] args
  |--[string] 0 ------------- aaa2
  |--[string] 1 ------------- aaa
  |--[number] 2 ------------- 6
  |--[string] 3 ------------- a2aa22aaa222________

字符串对象:search方法

search方法和indexOf方法类似,但是接受的是正则表达式对象,如果能够匹配,则返回首次匹配的首字符位置,如果不能匹配,则返回-1。此方法会忽略g标志。

var myStr = "abaabbaaabbb";  
var searchRegExp1 = /aaa/;  
iJs.pt("myStr.search(searchRegExp1)");  
var searchRegExp2 = /aXa/;  
iJs.pt("myStr.search(searchRegExp2)");

调试信息:

myStr.search(searchRegExp1)    6
myStr.search(searchRegExp2)    -1

想要了解更多相关知识,可访问 前端学习网站!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript掌握正则表达式 的相关文章

  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • 是否存在 IsCallable 为 false 但 IsConstructor 为 true 的 JS 对象?

    ECMAScript 规范函数可调用 https www ecma international org ecma 262 6 0 index html sec iscallable当且仅当其参数具有 Call 内部方法时返回 true 它在
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 详解HTML文档声明(DOCTYPE)

    HTML文档通常以类型声明开始 xff0c 该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型 本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行 且顶格显示 xff0c 对大小写不敏感 因为任何放在DOC
  • CSS 不定宽高的垂直水平居中(9种方法)

    垂直居中 xff0c 在 CSS 中是一个老生常谈的问题 xff0c 面试的时候也会时常被提及 所以 xff0c 今天我们就来聊聊 9 种不同的居中方法 有常见的 flex transform absolute 等等 也有 CSS3 的网格
  • html5不常用标签应用场景

    作为一个前端开发 xff0c 在浏览别人家的页面时总是会习惯性的查看他们页面的源码 xff0c 发现大多数网站的页面 xff0c 包括我自己写的页面中用到的最多的布局元素无外乎就是div p span ul dl ol li dt dd s
  • HTML的16个全局属性介绍

    在HTML中 xff0c 属性能表达相当丰富的语义 xff0c 而且属性也会额外提供很多实用的功能 xff0c HTML共支持16个常见的全局属性 HTML原有属性 accesskey 作用 xff1a 浏览器用来创建激活或聚焦元素的快捷键
  • 聊聊JavaScript作用域

    几乎所有的语言都有作用域的概念 xff0c 简单的说 xff0c 作用域就是变量和函数的可访问范围 xff0c 即作用域控制在变量和函数的可见性和生命周期 变量作用域 是程序源代码中定义这个变量的区域 1 全局变量拥有全局作用域 xff0c
  • CSS布局方案大全【整理】

    我们在日常开发中经常遇到布局问题 xff0c 下面罗列几种常用的css布局方案话不多说 xff0c 上代码 xff01 居中布局 以下居中布局均以不定宽为前提 xff0c 定宽情况包含其中 1 水平居中 a inline block 43
  • 你必须知道的一些HTML优化技巧

    如何提升Web页面的性能 xff0c 很多开发人员从多个方面来下手如JavaScript 图像优化 服务器配置 xff0c 文件压缩或是调整CSS 很显然HTML 已经达到了一个瓶颈 xff0c 尽管它是开发Web 界面必备的核心语言 HT
  • 常见的CSS图形绘制合集

    展示40多个常见的纯CSS绘制图形 xff0c 效果实时 xff0c 含源代码 xff0c 想要什么效果直接复制粘贴就好了 就算项目用不到 xff0c 看看别人代码怎么写的也有助于提高CSS的基本功 以下这些造型简单的图形都是纯CSS外加一
  • 扩展Vue.js组件

    您的Vue应用程序中是否有共享类似选项的组件 xff0c 甚至模板标记 使用公共选项和标记创建基本组件 xff0c 然后扩展基本组件以创建子组件 xff0c 这是一个好主意 这样的体系结构将帮助您在代码中应用DRY原则 不要重复您自己 xf
  • Node.js日志记录指南

    当你开始用 JavaScript 进行开发时 xff0c 可能学到的第一件事就是如何用 console log 将内容记录到控制台 如果你去搜索如何调试 JavaScript xff0c 会发现数百篇博文和 StackOverflow 文章
  • 软件测试的测试方法及测试流程

    一 测试方法 xff1a 白盒测试 xff1a 把软件比作一个打开的盒子 xff0c 可以看到软件代码的实现 xff0c 针对代码的实现验证代码是否存在问题 单元测试阶段采用的测试方法 灰盒测试 xff1a 介于白盒和黑盒测试之间 灰盒测试
  • 18个用于创建漂亮图表的JavaScript库推荐

    几乎不可能想象没有图形和图表的任何仪表盘 它们快速有效地呈现复杂的统计数据 此外 xff0c 一个好的图表还可以增强网站的整体设计 在本文中 xff0c 我将向您展示一些用于图形和图表的最佳JavaScript库 这些库将帮助您为将来的项目
  • JavaScript基础--引用数据类型 (对象)

    本文主要讲述了JavaScript对象的属性和对象的引用 xff0c 以及对象的读取 赋值 删除和获取对象键名的操作 1 对象 对象就是一组 键值对 xff08 key value xff09 的集合 xff0c 是一种无序的复合数据集合
  • javascript面向对象设计

    javascript和java语言不一样 xff0c 它没有类这个说法 xff0c 更没有子类父类一说 xff0c 所以它所谓的继承机制 xff0c 也是和其他语言完全不同的 创建对象三种方式 1 最简单的方式 xff0c 创建一个obje
  • 关键CSS和Webpack:自动最小化渲染阻止CSS

    消除渲染阻止的JavaScript和CSS 这是我始终坚持使用的Google Page Speed Insights建议 Google建议您在页面加载准备就绪时将最初需要的CSS 内插 CSS内嵌并加载CSS的其余部分 当访问web页面时
  • 如何用SASS编写可重用的CSS

    Sass是一个CSS预处理程序 xff0c 它在前端工程师的工具箱中变得至关重要 Sass之所以流行 xff0c 是因为它修复了几个CSS缺陷 相关推荐 xff1a css在线手册 这也是Bootstrap 4运行的基础 这意味着为了理解如
  • JS 变量的作用域及闭包

    与闭包有关的概念 xff1a 变量的作用域和变量的生存周期 下面本篇文章就来给大家介绍一下JS中变量的作用域及闭包 xff0c 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 一 变量的作用域 1 变
  • 理解JavaScript中的变量、范围和提升

    变量是许多编程语言的基本组成部分 xff0c 也是新手需要学习的第一个也是最重要的概念 JavaScript中有许多不同的变量属性 xff0c 以及命名变量时必须遵循的一些规则 在JavaScript中 xff0c 有三个关键字用于声明变量
  • 用于VueJS和Webpack的代码分割模式

    拆分单个页面应用程序的代码是提高其初始加载速度的一个很好的方法 由于用户不必一次性下载所有代码 xff0c 他们将能够更快地看到页面并与页面进行交互 这将提高用户体验 xff0c 特别是在移动领域 xff0c 这是搜索引擎优化的一个胜利 x
  • javascript掌握正则表达式

    正则表达式 xff08 英语 xff1a Regular Expression xff0c 在代码中常简写为regex regexp或RE xff09 使用单个字符串来描述 匹配一系列符合某个句法规则的字符串搜索模式 我想正则表达式之所以难