JS正则表达式

JavaScript020

JS正则表达式,第1张

一. 正则表达式

正则表达式:其实就是一种匹配规则,用于检索字符串

定义正则表达式的两种方式:1.直接定义 2.构造函数定义

那么正则表达式正则强大的地方是它可以写 通配符(拥有特殊含义的字符)

二. 通配符

\w 表示:字母、数字、下划线

\W 表示:除了字母、数字、下划线以外的字符

\d 表示:数字

\D 表示:非数字

^ 表示:以^符号后面的第一个字符开头

表示:以表示:以符号前面的第一个字符结尾

{n} 表示:重复n次

{n,m} 表示:重复n到m次

[xyz] 表示:其中任意一个字符

+ 表示:重复前一项1次或多次 等价于 {1,}

* 表示:重复前一项0次或多次 等价于 {0,}

? 表示:重复前一项0次或1次 等价于 {0,1}

. 表示:除了换行符以外的任意一个字符

\. 表示:.字符 ^ 表示:^ \表示:表示:

可以用()将多个字符作为一个整体

\w 等价于 [0-9a-zA-Z_]

| 表示:或者

[\u4E00-\u9FA5] 是常用汉字的unicode编码范围

三. 正则练习

四. 正则表达式配合字符串的方法

replace()方法

默认情况下,replace()方法,只会替换字符串中匹配的第一段内容

使用正则表达式,添加全局匹配修饰符g,可以替换匹配全部内容

使用正则表达式,添加忽略大小写修饰符i,在匹配内容时会忽略大小写

search()方法

可以通过正则表达式查找位置

五. 添加学生练习

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>添加学生</title>

    <style>

        .err{

            color: red

        }

        .ok{

            color: green

        }

    </style>

</head>

<body>

    <form>

        <table>

            <tr>

                <td>姓名:</td>

                <td>

                    <input type="text" id="name">

                    <span id="nameMsg"></span>

                </td>

            </tr>

            <tr>

                <td>年龄:</td>

                <td>

                    <input type="text" id="age">

                    <span id="ageMsg"></span>

                </td>

            </tr>

            <tr>

                <td>性别:</td>

                <td>

                    <input checked name="sex" type="radio" value="0">男

                    <input name="sex" type="radio" value="1">女

                </td>

            </tr>

            <tr>

                <td>爱好:</td>

                <td>

                    <input name="hobby" type="checkbox" value="抽烟">抽烟

                    <input name="hobby" type="checkbox" value="喝酒">喝酒

                    <input name="hobby" type="checkbox" value="烫头">烫头

                    <input name="hobby" type="checkbox" value="睡觉">睡觉

                </td>

            </tr>

            <tr>

                <td>年级:</td>

                <td>

                    <select id="grade">

                        <option value="0">请选择</option>

                        <option value="1">大一</option>

                        <option value="2">大二</option>

                        <option value="3">大三</option>

                        <option value="4">大四</option>

                    </select>

                    <span id="gradeMsg">必须要选择一个年级</span>

                </td>

            </tr>

            <tr>

                <td>邮箱:</td>

                <td>

                    <input type="text" id="email">

                    <span id="emailMsg">请输入正确的邮箱格式</span>

                </td>

            </tr>

            <tr>

                <td>电话:</td>

                <td>

                    <input type="text" id="phone">

                    <span id="phoneMsg">请输入正确的电话格式</span>

                </td>

            </tr>

            <tr>

                <td>生日:</td>

                <td>

                    <input type="text" id="bornDate">

                    <span id="bornDateMsg">请输入正确日期格式</span>

                </td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <button type="submit">提交</button>

                    <button type="reset">重置</button>

                </td>

            </tr>

        </table>

    </form>

    <script>

        //获取姓名文本框

        let name = document.querySelector('#name')

        //获取年龄文本框

        let age = document.querySelector('#age')

        //表单的提交事件

        document.querySelector('form').onsubmit = function(){

            // 返回true提交表单,返回false不提交表单

            if(checkName() &checkAge()){

                return true

            }else{

                return false

            }

        }

        //姓名文本框失去焦点

        name.onblur = checkName

        //验证姓名

        function checkName(){

            //定义验证姓名的正则

            let reg = /^[\u4E00-\u9FA5]{2,4}$/

            // 调用验证方法

            return checkInput("#nameMsg",name,reg,'姓名正确','姓名必须是2-4位汉字')

        }

        //年龄文本框失去焦点

        age.onblur = checkAge

        //验证年龄

        function checkAge(){

            //定义验证年龄的正则

            let reg = /^\d{1,2}$|^1([0-1]\d)|20$/

            // 调用验证方法

            return checkInput("#ageMsg",age,reg,'年龄正确','年龄必须是0-120之间')

        }

        //验证方法,参数分别是:span元素Id,表单元素对象,正则规则,验证成功消息,验证失败消息

        function checkInput(spanId,_this,reg,okMsg,errMsg){

            // 获取消息span

            let span = document.querySelector(spanId)

            //获取信息

            let val = _this.value

            if(!reg.test(val)){

                span.className="err"

                span.innerHTML = errMsg

                return false  //验证失败返回false

            }else{

                span.className="ok"

                span.innerHTML = okMsg

                return true  //验证成功返回true

            }

        }

    </script>

</body>

</html>

字 符描 述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。^匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。$匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 之前的位置。*匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。+匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。?匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。{n}n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。{n,}n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。{n,m}m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。?当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。.匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符,请使用象 '[.\n]' 的模式。(pattern)匹配pattern 并获取这一匹配。在JScript 中则使用 $1…$9 属性。要匹配圆括号字符,请使用 '\(' 或 '\)'。(?:pattern)匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。(?=pattern)正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。(?!pattern)负向预查,在任何不匹配的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows",但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始 x|y匹配 x 或 y。例如,'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。 [xyz]字符集合。匹配所包含的任意一个字符。例如, '[abc]' 可以匹配 "plain" 中的 'a'。 [^xyz]负值字符集合。匹配未包含的任意字符。例如, '[^abc]' 可以匹配 "plain" 中的'p'。 [a-z]字符范围。匹配指定范围内的任意字符。例如,'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。例如:[a-z] [A-Z] [0-9][^a-z]负值字符范围。匹配任何不在指定范围内的任意字符。例如,'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。\b匹配一个单词边界,也就是指单词和空格间的位置。例如, 'er\b' 可以匹配"never" 中的 'er',但不能匹配 "verb" 中的 'er'。 \B匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er',但不能匹配 "never" 中的 'er'。\cx匹配由x指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。 \d匹配一个数字字符。等价于 [0-9]。 \D匹配一个非数字字符。等价于 [^0-9]。 \f匹配一个换页符。等价于 \x0c 和 \cL。\n匹配一个换行符。等价于 \x0a 和 \cJ。\r匹配一个回车符。等价于 \x0d 和 \cM。\s匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。\t匹配一个制表符。等价于 \x09 和 \cI。\v匹配一个垂直制表符。等价于 \x0b 和 \cK。\w匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 \W匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 \xn匹配 n,其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如, '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' &"1"。正则表达式中可以使用 ASCII 编码。.\num匹配 num,其中 num 是一个正整数。对所获取的匹配的引用。例如,'(.)\1' 匹配两个连续的相同字符。 \n标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式,则 n 为后向引用。否则,如果 n 为八进制数字 (0-7),则 n 为一个八进制转义值。\nm标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式,则 nm 为后向引用。如果 \nm 之前至少有 n 个获取,则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足,若 n 和 m 均为八进制数字 (0-7),则 \nm 将匹配八进制转义值 nm。\nml如果 n 为八进制数字 (0-3),且 m 和 l 均为八进制数字 (0-7),则匹配八进制转义值 nml。\un匹配 n,其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如, \u00A9 匹配版权符号 (?)。

首尾不得为空 可以用jquery的$.trim()来清楚首尾的空字符

不用jquery 用正则的话 这样来写

var reg=/^[^\s].*{1,68}[^\s]$/g

//上面这种可以实现前后不能有空 但不能严格的控制字符的长短 不能实现一位字符的判断 所以来换一种写法

var reg=/(?!^\s+)(?!\s+$).*{1,70}/g

手机回答的 不好亲自测试 如果不能用 你再找我!