1、概念

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>正则表达式</title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        //RegExp对象

        //创建正则对象方式1

        //参数1  正则表达式（不能有空格）

        //参数2  匹配模式：常用g（全局匹配；找到所有匹配，而不是第一个匹配后停止）和i（忽略大小写吧）

        var str = 'hello World';

        var reg1 = new RegExp('e','ig');

        console.log(reg1)

        //2.字面量方式创建

        var reg2 = /o/gi;//检测字符e，不区分大小写，全局匹配

        //正则对象提供的检索方式

        //test() 检测字符串中是否包含定义字符模式，返回布尔

        //要检索的字符在字符串str中 返回true

        console.log(reg2.test(str));

        //2.2  exec()  具体执行匹配，返回数组

         console.log(reg2.lastIndex); // 2 保存一次匹配时开始的下标

         console.log(reg2.exec(str));  //["o", index: 7, input: "hello world"]

         console.log(reg2.lastIndex); //2

        //3.常用方法

        //match

        var reg3 = /d/g;

        console.log(str.match(reg3))

        //2.replace替换： str.replace(被替换的，替换的)

        console.log(str.replace(reg3,'*'));

        //3.search()

        console.log(str.search(reg3));//查询字符串在字符中出现的位置 下标

        //4.split()

        console.log(str.split(reg3));

    </script>

</html>

2、元字符

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>元字符</title>

    <script>

        window.onload = function (){

            //元字符

            //1.单个字符和数字

            //1   . 匹配除换行符以为的任意字符

            var str = "oweb";

            var reg = /./g;

            console.log(reg.exec(str));

            var str = "www/baidu/com";

            var reg = /www\......\.com/g;   //如果想不让字符有其他意义  转义\

            console.log(reg.exec(str));

            //2.   []  匹配[]里面的任意一个字符

            var str1 = "4awebadsads";

            var reg1 = /[a-zA-Z0-9]/g; // 匹配字母还是数字

            console.log(reg1.exec(str1));

            var str2 = "1s34";

            var reg2 = /[0-9][0-9][0-9]/g;

            console.log(reg2.exec(str2));

            //3.  [^]   所有不在这个范围内的字符

            var str3 = "abd";

            var reg3 = /[^a-z]/g;  //匹配除小写字母以外的任意字符

            console.log(reg3.exec(str3));

            //4.  \

            var str4 = "web";

            var reg4 = /\d/g;   //匹配数字

            var reg5 = /\D/g;   //非数字

            console.log(reg4.exec(str4));  //null

            console.log(reg5.exec(str4));  //w

            var reg6 = /\w/g;  //匹配数字 字母  下划线_

            var reg7 = /\W/g;  //匹配除数字 字母  下划线以外的任意字符

            console.log(reg6.exec(str4));   //w

            console.log(reg7.exec(str4));   //null

            var reg8 = /\s/g; //空格

            var reg9 = /\S/g; //非空白字符

            console.log(reg8.exec(str4));   //null

            console.log(reg9.exec(str4));   //w

            //5 锚字符  ^以什么开头     $以什么结尾

            var str = "www.";

            var reg10 = /^www/g;  // ^字符

            console.log(reg10.exec(str));

            var reg11 = /www\.$/g;   //字符$

            console.log(reg11.exec(str));

            //重复的字符

            //?  匹配前面的字符0个或一个 ，

            var strs = "webr44546ere";

            var reg12 = /[0-9]?/g;

            console.log(reg12.exec(strs));

            //*  匹配0个或任意多个字符    尽可能多的匹配

            var reg13 = /[a-z]*/g; //匹配小写字母，0个或多个

            console.log(reg13.exec(strs));

            //+ 至少匹配一次

            var reg14 = /\d+/g;

            console.log(reg14.exec(strs));

            //{4}

            var stra = "";

            var rega = /^1\d{10}$/g; //匹配连续的四个数字

            console.log(rega.exec(stra));

            //{1,4} 最少一个最多4个

            var strb = "edg";

            var regb = /^[a-zA-z]{2,3}$/g;

            console.log(regb.exec(strb));

            //||  竖线  或者

            var strc = "www.google"; //baidu  google   ujiuye

            var regc = /www.baidu|google|ujiuye/g;

            console.log(regc.exec(strc));

            //() 分组

            var strc = "www.google"; //baidu  google   ujiuye

            var regc = /www.(baidu)|(google)|(ujiuye)/g;

            console.log(regc.exec(strc));

            console.log(RegExp.$1);

            console.log(RegExp.$2);

            console.log(RegExp.$3);

            var str = "helloworld";

            var reg = /(hello)(world)/g;

          /*  console.log(reg.exec(str));

            console.log(RegExp.$1);*/

            console.log(str.replace(reg,"$2 $1"));

        }

    </script>

</head>

<body>

</body>

</html>

3、相关练习

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>正则表达式相关练习</title>

</head>

<body>

    <script type="text/javascript">

        //正则表达式练习  http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

        window.onload = function () {

            //1.检索字符串中是否不包含字母

            var str = '';

            var reg1 = /[^a-zA-Z]/g;

            console.log(reg1.test(str));

            if(reg1.test(str)){

                console.log('不包含');

            }else{

                console.log('包含');

            }

            //2.去除字符串首尾空格

            var str2 = '   hello world!  ';

            //开头的空格

            var reg =/^\s+/ig;  //  + 1到多次！

            var str3 = str2.replace(reg,"");

            var reg2 = /\s+$/ig;

            var str4 = str3.replace(reg2,"");

            console.log("|"+str4+"|");

            //3.检查用户账号

            function checkUser(str) {

                var re = /^[a-zA-Z]\w{3,15}$/ig;

                if(re.test(str)){

                    console.log('正确')

                }else{

                    console.log('错误')

                }

            }

            checkUser('alex_haha');

            //4.手机号码 11位数字以1开头

            function checkMobile(str) {

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

                if(re.test(str)){

                    console.log('正确')

                }else{

                    console.log('错误')

                }

            }

            checkMobile('');

            checkMobile('');

            //5.电话号码 区号+号码 区号以0开头 3位或4位

            // 号码由7位或8位数字组成

            // 区号与号码之间可以无连接符，也可以"-"连接

            function checkPhone(str) {

                var re = /^0\d{2,3}-?\d{7,8}$/ig;

                if(re.test(str)){

                    console.log('正确')

                }else{

                    console.log('错误')

                }

            }

            checkPhone("095-12345678");

            //6.邮箱

            //规则：第一部分@第二部分

            //第一部分：由字母 数字 下划线 短线 - 点号 . 组成

            //第二部分：为一个域名 域名由 字母 数字 短线 短线 - 域名后缀组成

            // 域名后缀一般为 .xxx 或者 .xxx.xx 一区的域名后缀一般为 2-4 位，如cn,

            function checkEmail(str) {

                var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ig;

                if(re.test(str)){

                    console.log('正确')

                }else{

                    console.log('错误')

                }

            }

            checkEmail('alex@cnbolgs.cn');

        }

    </script>

</body>

</html>

前端-javascript-正则表达式的更多相关文章

  1. web前端篇：JavaScript正则表达式

    目录 JavaScript正则表达式 1.创建正则表达式 1.1方法1:直接量语法 1.2 方法2:创建RegExp对象的语法 1.3 区别: 1.4正则表达式使用 2.正则对象的属性 2.1.属性 ...

  2. web前端学习（四）JavaScript学习笔记部分（10）-- JavaScript正则表达式

    1.JavaScript正则表达式课程概要 方便查找字符串.数字.特殊字串等等 2.正则表达式的介绍 RegExp是正则表达式的缩写 当检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp ...

  3. JavaScript正则表达式下——相关方法

    上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...

  4. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  5. javascript 正则表达式补充

    定义 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%&g ...

  6. 前端- JavaScript - 总结

    1.JavaScript的介绍 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言. 它运行在客户端从而减轻服 ...

  7. JavaScript正则表达式及jQuery回顾

    JavaScript 正则表达式,用于规定在文本中检索的内容. 一.定义正则表达式: rep = /\d+/; // js定义正则.(python定义正则:re模块 rep = "\d+&q ...

  8. JavaScript正则表达式，你真的知道？

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

  9. 【JS】javascript 正则表达式 大全 总结

    javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...

  10. 理清JavaScript正则表达式--上篇

    在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...

随机推荐

  1. hybrid app 知识点

    WebView能加载显示网页,可以将其视为一个浏览器. Android系统中,叫做 WebView ios系统中,新版是 WKWebView,旧版是 UIWebView Native App 和 We ...

  2. C#获取本机IP地址（ipv4）

    获取本机所有IP地址: 这些地址是包含所有网卡(虚拟网卡)的ipv4和ipv6地址. string name = Dns.GetHostName(); IPAddress[] ipadrlist = ...

  3. JZ2440 裸机驱动 第11章 通用异步收发器UART

    本章目标: 了解UART原理: 掌握S3C2410/S3C2440中UART的使用 11.1 UART原理及UART内部使用方法 11.1.1 UART原理说明     UART用于传输串行数据:   ...

  4. 【FusionCharts学习-2】第一个FusionCharts程序

    获取资源 到官网:http://www.fusioncharts.com/download/ 获取FusionCharts文件: 目录结构: js目录下的文件: 创建项目 1. 项目名称:Fusion ...

  5. Oracle学习操作（7）用户、权限、角色

    一.oracle用户: 二.权限 1.系统权限: sys登陆创建c##test用户后,给用户c##test授权,并且带有传播性: SQL> create user c##test identif ...

  6. Python 标准库 ConfigParser 模块 的使用

    Python 标准库 ConfigParser 模块 的使用 demo #!/usr/bin/env python # coding=utf-8 import ConfigParser import ...

  7. AWS CLI以及AWS S3 SYNC命令行使用

    1.到AWS的IAM创建用户,并且获取到访问密钥 ID 和私有访问密钥.下载密钥并保存. 2.到http://docs.amazonaws.cn/cli/latest/userguide/instal ...

  8. 利用Red Blob游戏介绍A*算法

    转自:http://gad.qq.com/program/translateview/7194337 在游戏中,我们经常想要找到从一个位置到另一个位置的路径.我们不只是想要找到最短距离,同时也要考虑旅 ...

  9. oracle 年龄计算 岁 月 天

    select trunc(months/12) || '岁' || trunc(mod(months, 12)) || '月' ||       trunc(sysdate - add_months( ...

  10. 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)

    这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的. 先看效果图: html代码: < ...