正则表达式

最新推荐文章于 2021-12-11 13:46:10 发布

thanksKlan

最新推荐文章于 2021-12-11 13:46:10 发布

阅读量421

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108113439

版权

本文详细介绍了JavaScript中的正则表达式，包括元字符如d、D、s、S、w、W等，限定符的使用，边界符的概念，以及其他特殊符号的功能。还讲解了正则的方法如test()、exec()，以及配合正则使用的字符串方法replace()、match()、search()。最后，文章提到了正则在实际应用中的场景，如制作注册表单的验证功能。

摘要由CSDN通过智能技术生成

正则表达式（规则表达式）

例

字面量 var reg1=/abc/

内置构造函数 var reg2=new RegExp(‘abc’)

元字符

\d 一个数字

var reg1=/ \d /

var str = ‘a1bc2d’

test()

console.log(reg1.test(str))

test()是用来检验是否符合，返回值为布尔值

\D 非数字

var reg=/ \D /

var str=‘b2345’

console.log(res.test(str))

\s 一个空格

var reg=/ \s /

var str=‘1234 abcd’

console.log(res.test(str))

\S 一个非空格

	var reg = /\S/

 var str = '1234    abcd'

 console.log(reg.test(str))

\w 一个数字字母下划线

var reg = /\w/

var str = ‘@**@’

console.log(reg.test(str))

\W 一个非数字字母下划线

var reg = /\W/

var str = ‘@123_@’

console.log(reg.test(str))

. 一个除了换行以外的字符

console.log(‘123\nabc’)

限定符

1、 * 0-正无穷

var reg = /\d*/

var str = ‘12345abcde’

console.log(reg.test(str))

2、+ 1 - 正无穷

var reg = /\d+/

var str = ‘abcde’

console.log(reg.test(str))

3、? 0-1次

var reg = /\d?/

var str = ‘123abcde’

console.log(reg.test(str))

4、{n} 出现 n 次

var reg = /\d{2}/

var str = ‘1234e’

console.log(reg.test(str))

5、{n,} 出现 n - 正无穷次

6、{n,m} 出现 n - m 次

边界符

1、^ 以 … 开头

2、$ 以 … 结尾

var reg = /^\d?$/ // 以一个数字开头一个数字结尾这个数字出现 0 - 1 次(只有一个数字)

var str = ‘1’

console.log(reg.test(str)) //=>true

var reg = /^\d{2}$/ 以数字开头，数字结尾，并且出现两次

var str = ‘121’

console.log(reg.test(str)) //=>false

其他符号

1、 \转义符本身有特殊含义的字符加上 \ 就没有特殊意义了本身没有特殊含义的字符加上 \ 就有了特殊含义

var reg=/^.$/

console.log(res.test(’*’))

2、() 把一堆东西当成一个整体

3、 |占位或

|| 逻辑或

var reg=/^(123|456)$/

4、[ ]中间的东西任选一个

5、- 至、到

var reg=/¹$/

var str=‘c’

console.log(reg.test(str))

6.[^] 非

var reg=/^[a-z/$/

var str=‘1’

console.log(reg.test(str))

//这个意思就是除了(a-z的字母)

正则的方法

1.test()

test() 方法用于检测一个字符串是否匹配某个模式。返回值为布尔值

2.exec()

exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null

例如

var arr1=/\d{3}/g

var arr2=‘123abchsdjd456sdafjnk789’

var res =arr1.exec(arr2)

console.log(res) //=>会返回一个数组

标识符

g 全局匹配

i 忽略大小写

配合正则使用的字符串的方法

1、replace() 替换

var str = ‘dshjSMdhsjkdSMhdjshdSM’

str = str.replace(/SM/g,’**’)

console.log(str)

2、match() 把符合规则的字符放到一个数组里面返回

var str = ‘123abchsdjd456sdafjnk789’

var reg = /\d{3}/g

var res = str.match(reg)

console.log(res)

3、search() 找到符合规则的字符返回对应的下标

var str = ‘abc123hsdjd456sdafjnk789’

var reg = /\d{3}/

var res = str.search(reg)

console.log(res)

补充

onblur 事件会在对象失去焦点时发生。

onfocus 事件

当 input 输入框获取焦点时执行一段 Javascript代码

制作注册表单，并实现警示功能
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        
        .box {
   
            /* width: 600px; */
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        
        label {
   
            display: flex;
            height: 60px;
            align-items: center;
            position: relative;
        }
        
        input {
   
            width: 300px;
            height: 35px;
            box-sizing: border-box;
            padding-left: 15px;
            color: #444;
        }
        
        span {
   
            padding-right: 20px;
            width: 100px;
            text-align: right;
            font-weight: 900;
        }
        
        .code {
   
            width: 150px;
        }
        
        label a {
   
            width: 140px;
            margin-left: 10px;
            height: 33px;
            border: 1px solid #ddd;
            color: #666;
            text-decoration: none;
            text-align: center;
            line-height: 33px;
            font-size: 14px;
            background-color: #f7f7f7