美文网首页
js正则表达式教程示例

js正则表达式教程示例

作者: 依然范佩西Ewing | 来源:发表于2018-03-01 16:58 被阅读0次

正则表达式是项目开发中常用的模式,内容替换、表单认证、网络爬虫等,通过以下的例子我相信可以大概掌握正则表达式了

定义字符集 []

  • [a-e]表示a到e这些字符中的某一个字符

  • [a-z]26个字母之一

  • [aeiou]表示aeiou这5个字符其中的某一个字符

  • [a-zA-Z]表示大写、小写字母中的某一个字符

  • [a-zA-Z0-9_-]表示大写、小写字母、0-9、_、-中的某一个字符

  • [0-9]表示0到9之间的任意一个数字

  • [9-3] [z-a]不能从大往小写,有语法错误

     <script type="text/javascript">
         //定义字符集
         //在没有特殊限制的时候就是“单次”匹配
         //从左往右匹配到第一符合模式的内容即可
    
         var str = "2015-09-12 is a SunShine Day";
         var reg = /[a-z]/;   //["i"]
         var reg = /[M-W]/;   //["S"]
         var reg = /[uxpq]/;  //["u"]
         var reg = /[0-9]/;   //["2"]
         var reg = /[a-z_-]/; //["-"]
         var rst = str.match(reg);
         console.log(rst);
         
     </script>
    

特别字符集

  • $:匹配输入字符串的结尾位置

  • ^(托字符):表示字符串的开始位置,或者表示非

  • ():标记一个字表达式的开始和结束位置

  • :其前面那个单元出现0次或以上(任意次数)*

  • +:其前面那个单元出现1次或以上

  • ?:其前面那个单元出现0次或者1次

  • .点:匹配除换行符\n之外的任何单字符

  • \:用来转义的符号

  • |:表示两个之间的一个选择,或

     <script type="text/javascript">
         //特别字符集
    
         //*  ?  +
         var str = "2018-03-01 is a SunShine Day";
         var reg = /[0-9]+/;   //["2018"]
         
         var str = "gooogle";
         var reg = /go+gle/; //["gooogle"]
    
         var str = "ggle";
         var reg = /go*gle/; //["ggle"]
         
         var str = "hellow 0 javascript";
         var reg = /[0-9]+/; //["0"]
         var reg = /[0-9]*/; //[""]匹配空的字符串,因为开始的时候就出现了0次,"没有"
         var reg = /loe?w/; //["low"]
         
         var rst = str.match(reg);
         console.log(rst);
         
         //.点  \  |
         var str = "svovk(dsf?>?*&{})!^\n}PPoo*&?";
         var reg = /.*/; //["svovk(dsf?>?*&{})!^"]
         
         var str = "xiaoming like eat apple";
         var reg = /banana|apple/; //["apple"]
         
         var str = '<div class="box">the box</div>';
         var reg = /<div class=\"box\">the .*<\/div>/; //["<div class="box">the box</div>"]转义在正则中有特殊含义的字符,例如| / . ? + 等
         var rst = str.match(reg);
         console.log(rst);
         
         
         //^和$符号
         var str = "php is the best language";
         var reg = /[language]/; //["language"]
         var reg = /[^language]/; //null 'language'在字符串的开始位置没有出现
         var reg = /[^php]/; //["php"]
         
         var reg = /[languag$]/; //null 'languag'在字符串的结尾位置没有出现
         var reg = /language$/; //["language"]
         
         //^和$两符号要出现在每个正常的正则表达式里边
    

    //作用:可以“完整”地匹配输入字符串的信息
    //手机号码验证:13开始,后续有9位数字,不能添加其余内容
    var str = "13250185056";
    var reg = /^13[0-9]{9}$/;//{m}前面单元严格出现m次
    var rst = str.match(reg);
    console.log(rst);

        //()小阔号
        //作用:
        //提高字表达式优先级
        //从一个大的字符串中拆分小的字符串出来
        var str = "gogle";
        var reg = /(go)+(gle)/;
        
        //rst[0] = "gogle";成功匹配的字符串
        //rst[1] = "go";第一个()里面匹配成功的字符串,不成功为undefined
        //rst[2] = "gle"第二个()里面匹配成功的字符串,不成功为undefined
        
        //提取html里面的关键内容
        var str = '<div id="today" class="tqingtoday"><h3 style="padding-bottom:0px;">北京</h3><ul><li class="tqpng_01"><li class="sd">晴</li><li class="font_05">';
        var reg = /<h3.*>(.*)<\/h3>/;
        var rst = str.match(reg);
        console.log(rst[0]);//"<h3 style="padding-bottom:0px;">北京</h3>"
        console.log(rst[1]);//"北京",成功提取出北京
    </script>
  • ()小括号使用扩展

     <script type="text/javascript">
         //小括号模式单元 重复使用
    
         var str = "2018-09-09 09:09:09";
         //匹配到的时间特点:月份、日期、时、分、秒都一致
         var reg = /[0-9]+-[0-9]+-[0-9]+ [0-9]+:[0-9]+:[0-9]+/; // ["2018-09-09 09:09:09"]
         //通过“\1”重复匹配前面第一个小括号模式单元内容
         var reg = /[0-9]+-([0-9]+)-\1 \1:\1:\1/; // ["2018-09-09 09:09:09","09"]
         //通过“\2”重复匹配前面第二个小括号模式单元内容
         var reg = /([0-9]+)-([0-9]+)-\2 \2:\2:\2/; //["2018-09-09 09:09:09","2018","09"]
         
         var str = "2018:11 2018&11";
         var reg = /([0-9]+):([0-9]+) \1&\2/; //["2018:11 2018&11","2018","11"]
         
         //\m模式单元重复使用 与 {m}、+、*的区别:
         //1、\m\m\m\m 限制前面单元出现多次
         //   重复匹配前面第m个小括号内容
         //   要求 匹配内容与被匹配内容的“大小和数据类型”都一致
         //2、{m}、+、*限制前面单元出现多次,出现的内容只要保证“数据类型”一致即可
         
         var str1 = "2018-03-03-03-03-03";
         var str2 = "2018-03-12-15-23-57";
         
         var reg = /[0-9]+(-[0-9]+)\1\1\1\1/; //["2018-03-03-03-03-03","-03"] null(str2匹配不成功)
         
         var reg = /[0-9]+(-[0-9]+){5}/; //["2018-03-03-03-03-03","-03"] ["2018-03-03-03-03-03","-57"]
         
         //{5}、+、* 匹配以上两个str效果一样
         
         
         var rst = str.match(reg);
         console.log(rst);
         
     </script>
    

模式修正符

var 模式名称 = /模式内容/模式修正符;

  • i:忽略大小写

  • g:全局匹配(进行全局匹配的时候不给体现"模式单元"内容,默认是单次匹配,非全局)

     <script type="text/javascript">
         //模式修正符
    
         var str = "Beijing2008Guangzhou2010Shanghai2012";
         var reg = /[a-z]+([0-9]+)/ig;
         var rst = str.match(reg);
         console.log(rst);
         //["Beijing2008","Guangzhou2010","Shanghai2012"],没有index和input属性,不获取()里面的内容
         
     </script>
    

组合字符集

  • \d:表示数字[0-9]

  • \D:表示非数字[^0-9]

  • \w:表示字母、数字、下划线中其中一个[a-zA-Z0-9_]

  • \W:非字母、数字、下划线[^a-zA-Z0-9_]

  • \s:表示空格

  • \S:表示非空格

     <script type="text/javascript">
         //组合字符集
         //\d:表示数字[0-9] \D:表示非数字[^0-9]
         var str = "2018/03/01";
         var reg = /\d+/; //["2018"]
         var reg = /\D/g; //["/","/"]
         var reg = /[^0-3]+/; //["8/"]
         
         //\w:表示字母、数字、下划线中其中一个[a-zA-Z0-9_] \W:非字母、数字、下划线[^a-zA-Z0-9_]
         var str = "asdas326_JIO@jiaying.yang";
         var reg = /\w+/; //["asdas326_JIO"]
         var reg = /\W/g; //["@","."]
         
         //s:表示空格 \S:表示非空格
         var str = "hellow      guangzhou";
         var reg = /[a-z]+\s\s\s\s\s\s[a-z]+/; //["hellow      guangzhou"]       
    
         var rst = str.match(reg);
         console.log(rst);
         
     </script>
    

限制字符集

  • {m}:前面单元出现m次
  • {m,}:前面单元至少出现m次,至多不限制
  • {m,n}:前面单元出现至少m次,至多n次
  • [^lsdf]:不是中括号中的任意一个字符
  • [^a-f]:不是中括号中范围的任意一个字符
  • var reg = /^apple/; 匹配内容开始有apple字样
  • var reg = /[^a-h]/; 不匹配a-h之间的字母

正向反向匹配

  • 正向匹配:我们要查找出来的内容,右边必须出现指定的信息,并且其是辅助条件,不是结果的一部分。
    var reg = /pattern(?=模式)/;

  • 正向不匹配:我们要查找出来的内容,右边不能出现指定的信息,右边的信息是辅助条件,非结果部分。
    var reg = /pattern(?!模式)/;
    例如:

     <script type="text/javascript">
         //正向匹配:小写字母字符串右边要出现连续数字信息
         
         var str1 = "javascript2018";
         var str2 = "javascript@2018";
         var reg = /[a-z]+(?=\d+)/; //["javascript"] 不匹配模式里面的内容  null没有在右边出现连续数字
         
         var str = "https://www.bmob.cn/shop/index.php?price=50&platform=0&type=2"
         //通过正向匹配获取参数名称 price、platform、type
         var reg = /[a-z]+(?==)/g; //["price","platform","type"]
         
         
         //正向不匹配:右边不能出现连续数字信息
         var str1 = "todayABC254";
         var str2 = "today123";
         var reg = /[a-z]+(?!\d+)/; //["today"] 不匹配模式里面的内容  null在右边出现了连续数字
         
         
         var rst = str.match(reg);
         console.log(rst);
         
     </script>
    
  • 反向匹配:左边必须出现指定信息
    var reg = /(?<=模式)pattern/;

  • 反向不匹配:左边不能出现指定信息
    var reg = /(?<!模式)pattern/;

相关文章

  • Linux正则表达式教程:Grep Regex示例

    Linux正则表达式教程:Grep Regex示例 什么是正则表达式? 正则表达式是特殊字符,可帮助搜索数据,匹配...

  • js正则表达式教程示例

    正则表达式是项目开发中常用的模式,内容替换、表单认证、网络爬虫等,通过以下的例子我相信可以大概掌握正则表达式了 定...

  • 学习资料

    js相关 阮一峰JS教程 阮一峰es6教程 JS原型与闭包 正则表达式 canvas学习 插件库相关 babel ...

  • js-xlsx工具类库 xlsxUtils 使用示例

    js-xlsx相关教程:纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例纯前端利用 js-xls...

  • Spring Boot + Vue.js 例子| Spring

    在本教程中,我们将向您展示Vue.js Http Client和Spring Boot Server示例,该示例使...

  • 正则表达式

    javascript正则表达式正则表达式30分钟入门教程js的正则表达式的正则前瞻(?=)和非捕获性分组(?:)有...

  • 纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示

    相关教程:纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例(2)纯前端利用 js-xlsx(3)...

  • DB2教程

    词Java示例搜索字符串中的特定单词Java示例拆分正则表达式JJava示例拆分正则表达式Java示例替换首次出现...

  • JS 正则表达式

    推荐一篇好文章:JS正则表达式完整教程(略长)[https://juejin.im/post/6844903487...

  • js正则表达式

    正则表达式必知必会 正式表达式基础可阅读菜鸟教程-js正则 匹配过程 匹配字符(str):'acdcabab'表达...

网友评论

      本文标题:js正则表达式教程示例

      本文链接:https://www.haomeiwen.com/subject/ymqnxftx.html