JavaScript(正则）

最新推荐文章于 2025-01-04 14:01:10 发布

原创最新推荐文章于 2025-01-04 14:01:10 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍正则表达式的使用方法，包括基本语法、常见规则及应用实例，如表单验证、数据提取等，帮助读者掌握正则表达式的基础与进阶技巧。

正则

学习目标：

1.会做简单的用户名密码的规则 - 表单验证

2.手机号的规则 - 表单验证

3.邮箱的规则 - 表单验证

4.学会如何从地址栏中提取一段想要的数据 - 提取数据

用于处理字符串的规则 js语法中，表现为一个对象

正则表达式的定义

var reg = /具体的规则/

var reg = new RegExp(具体的规则)

使用正则的5个方法

1.验证字符串：

正则.test(字符串)

字符串.search(正则)

2.提取一部分

正则.exec(字符串)

字符串.match(正则)

3.替换字符串中的部分

字符串.replace(正则, 新的数据)

正则的规则

是由字符和修饰符组成的

字符：普通字符串中的字符

修饰符：

{n} 必须n个

{n,m} 最少n个，最多m个

{n,} 最少n个
var str = 'asdjfhjaklsdf'
//字符串提取
var reg = /dj/
var reg = /\d{4}/
var reg = /\d{1,10}/
var reg = /\d{1,}/
+ 最少1个
var reg = /\d+/
? 最多1个
var reg = /\d?/
* 任意个，如果开头碰到了，就会将连续的很多都获取到，开头没有，空字符串
var reg = /\d*/

var arr = reg.exec(str) // exec方法返回的是一个数组 - 下标0就是我们提取的结果。如果字符串中没有符合规则的，返回null
console.log(arr);
g 开启贪婪模式 - 要在正则表示式的两个斜杠后面，添加 g
var str = '123456789'
var reg = /[3-5]/g
var res = str.replace(reg, '*')
console.log(res);   //12***6789
i 忽略大小写 - 要在正则表示式的两个斜杠后面，添加 i
var str = 'i love Html and HTML is very good'
var res = str.replace(/html/gi, 'js')
console.log(res);   //i love js and js is very good
^        开头，将规定开头的符号放在正则表达式的最前面 - ^

$        结尾，将规定结尾的符号放在正则表达式的最后面 - $

特殊字符：

\d        (代表一个任意数字)

\w表示一个任意的字母、数字、下划线
var str = 'asd123@#$%^46____541fjh'
// \w表示一个任意的字母、数字、下划线
var reg = /\w/    //a
var reg = /\w+/   //asd123@#$%^46____541fjh
// 提取字符串
var arr = reg.exec(str) 
console.log(arr);
\s表示一个空格
var str = 'iloveyou'
// 判断字符串中是否包含了空格
// \s表示一个空格
var reg = /\s/
var bool = reg.test(str)
console.log(bool);   //false
[]中放的内容 - []中的内容的任意一个
// 替换字符串
var str = '123456789'
// []中放的内容 - []中的内容的任意一个
var reg = /[345]+/
// 将3~5的数字替换成*
var res = str.replace(reg, '*')
console.log(res);   //12*6789
任意一个字母： [a-zA-Z]

. 表示一个任意字符

常见规则

手机号码规则

//手机号规则
var reg = /^1[3-9]\d{9}$/
//检验是否手机号
var str = '123456789633'
var bool = reg.test(str)
console.log(bool);    //false

邮箱规则

邮箱规则：qq邮箱 + 网易邮箱

最短5位，最长11位

qq邮箱

var reg = /^[1-9]\d{4,10}@qq.com$/
// 在正则中 . 是一个特殊字符，表示任意一个字符
// 如果要将其中某个字符的特殊含义去掉 - 前面加  \  进行转义
var reg = /^[1-9]\d{4,10}@qq\.com$/
var qq = '694464839@qq.com'
var res = reg.test(qq)
console.log(res);

网易邮箱

// 163邮箱
var reg = /^[a-zA-Z]\w{5,17}@163\.com$/
// 126
var reg = /^[a-zA-Z]\w{5,17}@126\.com$/
// 即表示163也表示126 - 在正则中表示或者 |
var reg = /^[a-zA-Z]\w{5,17}@(126|163)\.com$/
var email = 'h1974944348@163.com'
var bool = reg.test(email)
console.log(bool);

var reg = /^[a-zA-Z]\w{5,17}@yeah\.net$/
// 即表示163也表示126，又可以表示 yeah
var reg = /^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$/
var bool = reg.test(email)
console.log(bool);

qq邮箱或者网易邮箱

var reg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
var qq = '694464839@qq.com'
var bool = reg.test(qq)
console.log(bool);

表单验证 - dome

<body>
<form action="">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit">
            </td>
        </tr>
    </table>
</form>
</body>
<script>
var form = document.querySelector('form');
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
form.onsubmit = function() {
    // 如果通过校验就提交 - 没有通过校验就不提交
    // 用户名验证 - 规则：字母开头，数字和字母组成，3~10位
    var reg = /^[a-zA-Z][a-zA-Z0-9]{2,9}$/
    // var bool = reg.test(username.value)
    // console.log(bool);
    if(!reg.test(username.value)) {
        alert('用户名不符合规则')
        return false
    }

    // 密码规则：6~10位，任意字符
    var reg = /^.{6,10}$/
    if(!reg.test(password.value)) {
        alert('密码不符合规则')
        return false
    }
}
</script>