前端学习-JavaScript基础（正则表达式）

Yan阿清

已于 2022-04-04 09:37:02 修改

阅读量1.8k

点赞数 10

分类专栏：前端 JavaScript 文章标签：前端学习 javascript

于 2022-04-03 20:42:45 首次发布

本文链接：https://blog.csdn.net/weixin_51346866/article/details/123943918

版权

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

正则表达式

正则表达式在很多程序设计语言都有，大同小异，尤其是在Python爬虫的使用很多，我也就跟他们学习爬爬图片，小视频啥的，咳咳都是学习资料。在JavaScript中，使用比较多的是表单验证，字符串匹配截取替换，那我们就来简单了解一下。

概念

正则表达式，又称规则表达式。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

作用

正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

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

组成

普通字符
特殊字符（元字符）

元字符

元字符	描述
\d	表示数字。
\w	匹配一个任意字母、数字、下划线
\s	表示空格或空白字符。
^	表示开头
$	表示结尾
.	匹配任意字符（除了\n）
\|	或者
\	转义字符
\n	匹配换行符

其他

{} :对前面的字符修饰
[] : []中的内容任意一个
() : 分组
[^a] :  表示非a字符
[a-zA-Z] : 任意一个字母
[\u4e00-\u9fa5] :   任意一个汉字
\b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数

限定符

代表次数的量词元字符

限定符	说明
*	任意个
+	最少一个
?	最多一个
{n}	必须n个
{n,}	最少n个
{n,m}	最少n个，最多m个

其实还有修饰符

标志
i	忽略大小写
g	全局匹配，贪婪模式（查找所有匹配而非在找到第一个匹配后停止）
gi	全局匹配+忽略大小写
m	执行多行匹配。

定义方式

第一种
var reg=/\d{2}/
console.log(reg)  // 对象
第二种
var reg=new RegExp(规则)

正则的5种方法

1、验证字符串
正则.test(字符串)
字符串.search(正则)

2、提取字符串
字符串.match(正则)
正则.exec(字符串)

3、替换一部分字符串
字符串.replace(正则，新的数据)

test()方法

用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var str = 'you love i'
判断字符串中是否包含了空格
var reg = /\s/
var bool = reg.test(str)
console.log(bool);  //true

replace() 字符串替换

var str = '1234567'
// []中放的内容 - []中的内容的任意一个
var reg = /[345]+/
// 将3~5的数字替换成*
var res = str.replace(reg, '*')
console.log(res);  //12***67

search() 方法

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str='hello boy'
var sum=str.search(/boy/i);  //6

exec()方法

//字符串提取
var str="abacd123"
var reg=/ab/
var bol=reg.exec(str)   //exec方法返回的一个数组
console.log(bol)  //控制台输出 Array(1)，里面有ab

match() 方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

//地址栏提取数
var str = 'http://localhost:11011/project/src/detail.html?category=asdfa2^@！#352345sdf&id=5&keywords=南极人'

var reg=/id=(\d+)/   //获取id的值，（）放在数组中
var arr=str.match(reg)  //也是数组 
console.log(arr);  //[5]

常用正则表达式

手机号

标准的是：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

//11位数字，第二位3-9任意一个，没有定义运营的号段
var str='12341412422'
var reg=/^1[3-9]\d{9}$/
var bool=reg.test(reg)
console.log(bool)  //false

qq邮箱

//定义qq邮箱 5-11位
var str='1963183537@qq.com'
var reg=/^[1-9]\d{4,10}@qq\.com$/
var bool=reg.test(str)

网易邮箱

var reg=/^[a-zA-Z]\w{5-17}@(126|163)\.com | yeah\.net$/

简单的正则表达式

汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^{\d{15}$)|(^\d{18}$)|(}\d{17}(\d|X|x)$)
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$

简单案例：表单验证用户名密码

css、html：

<style>
    /* 先隐藏提示 */
    p{
        display: none;
    }
</style>
<body>
<table action="">
    <tr>
        <td>用户名：</td>
        <td>
            <input type="text" name="username">
            <p>用户名必须是字母开头，字母数字组成：6~10位</p>
        </td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="password" name="password">
        <p>密码必须数字字母6-11位</p>
    </td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit"></td>
    </tr>
</table>
</body>

<script>
var username=document.querySelector('[name="username"]')
var password=document.querySelector('[name="password"]')
// 点击获取焦点事件，显示提示
username.onfocus=function(){
    this.nextElementSibling.style.display="block"
}
// 失去焦点进行正则判断
username.onblur=function(){
    // 用户名必须是字母开头，字母数字组成：6~10位
    var reg=/^[a-zA-Z][a-zA-Z0-9]{5,9}$/
    if(this.value === ""){
        this.nextElementSibling.style.display="none"

    }else if(!reg.test(this.value)){
        this.nextElementSibling.innerText='用户名不通过'

    }else if(reg.test(this.value)){
        this.nextElementSibling.innerText='用户名通过'
    }
}
password.onfocus=function(){
    this.nextElementSibling.style.display="block"
}
// 失去焦点进行正则判断
password.onblur=function(){
    // 字母数字组成：6~11位
    var reg=/[a-zA-Z0-9]{6,10}$/
    if(this.value === ""){
        this.nextElementSibling.style.display="none"

    }else if(!reg.test(this.value)){
        this.nextElementSibling.innerText='密码不符合'

    }else if(reg.test(this.value)){
        this.nextElementSibling.innerText='密码符合'
    }

}
</script>