JS中的正则表达式

最新推荐文章于 2023-03-16 10:09:57 发布

神的恩惠。

最新推荐文章于 2023-03-16 10:09:57 发布

阅读量899

点赞数 1

文章标签：正则表达式 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_63048999/article/details/127605288

版权

1什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在js中，正则表达式是对象。

正则表达式通常用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤页面内容中的一些敏感词（替换），或从字符串中获取想要的特定部分（提取）等。

1.1正则表达式的特点

1.灵活性、逻辑性和功能性很强。

2.可以迅速地用极简单的方式达到字符串的复杂控制。

2正则表达式在js中的使用

2.1创建正则表达式

在js中，可以通过俩种方式创建一个正则表达式

1.通过调用RegExp对象的构造函数创建

<script>
        var regexp=new RegExp(/123/)
    </script>

2.利用字面量创建正则表达式

<script>
        var rg=/123/;
  </script>

2.2测试正则表达式test

test()正则表达式，用于检测字符串是否符合该规则，该对象会返回 true或false，其参数是测试字符串。

regexObj.test(str)

1.regexObj是写的正则表达式

2.str要测试的文本

3.测试的str文本是否符合正则表达式的规范

3.正则表达式中的特殊字符

3.1正则表达式的组成

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/。qi其中特殊字符也被称为元字符，在正则表达式中具有特殊意义的专用符号，如^、$、+等。

3.2边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有俩个字符。

边界符说明

^ 表示匹配行首的文本（以谁开始）

$ 表示匹配行尾的文本（以谁结束）

如果^和$在一起，表示必须是精确匹配。

字符类：[]表示有一系列字符可供选择，只要匹配其中一个就可以了

<script>
        var rg=/123/;
        console.log(rg.test(455));#false
        var zf=/[abc]/;
        console.log(zf.test('a'));#true
        console.log(zf.test('acb'));#true
        console.log(zf.test('a123'));#true
    </script>

<script> var zf=/^[abc]$/;
        console.log(zf.test('a'));#true
        console.log(zf.test('bc'));#false
        console.log(zf.test('a123'));#false
    </script>

3.3字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

2.[-]方括号内部范围符-

<script>
        var zm=/[A-z]/
        console.log(zm.test('D'));#true
    </script>

<script>
        var zm=/^[A-z0-9]$/
        console.log(zm.test('D'));
         console.log(zm.test('d'));
         console.log(zm.test(1));
    </script>

如果中括号里面有^则表示取反

[^]方括号内部取反符^

<script>
        var zm=/^[^A-z0-9]$/
        console.log(zm.test('D'));#false
    </script>

3.4量词符

量词说明

* 重复零次或更多次

+重复一次或更多次

? 重复零次或一次

{n} 重复n次

{n,} 重复n次或更多次

{n,m} 重复n到m次 //和python中用法相同

eg.用户名验证小案例

<!DOCTYPE *html*>

<html *lang*="en">

<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>Document</title>

</head>

<body>

  <input *type*="text" *class*="uname"><span *class*="message">输入用户名</span>

    <script>

  var zm=/*^*[A-z0-9_-]{6,16}*$*/

    console.log(zm.test('123'));

    var uname=document.querySelector(".uname");



   var message=document.querySelector(".message")
    uname.onblur=function(){

      *if*(zm.test(*this*.value)){

         message.style.color="green"

          message.innerHTML="可用用户名"

      }

      *else*{

          message.style.color='red'

          message.innerHTML="请重新输入用户名"

      }

    }

 

  </script>

</body>

</html>

<script>
        var yz=/^abc{3}$/
        console.log(yz.test('abccc'));#true
    </script>

3.5括号总结

1.小括号量词符.里面表示重复次数

2.中括号字符集合。匹配方括号中的任意字符

3.小括号表示优先级

3.6预定义类

预定义类指的是某些常见模式的简写方式。

预定类说明

\d 匹配0-9之间的任意一个数字，相当于[0-9]

\D 匹配所有0-9以外的字符，相当于[^0-9]

\w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]

\W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]

\s 匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]

\S 匹配非空格的字符，相当于[^\t\r\n\v\f]

<script>
       var reg=/^\d{3}-\d{8}|^\d{4}-\d{7}$/
       console.log(reg.test('012-12346568'));
    </script>

4.正则表达式中的替换

4.1replace替换

replace()方法可以实现字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。

stringObject.replace(regexp/substr,replacement)

1.第一个参数：被替换的字符串或者正则表达式

2.第二个参数：替换为的字符串

3.返回值是一个替换完毕的新字符串

<script>
        var str='andy和red';
        var newStr=str.replace(/andy/,'baby');
        console.log(newStr);
    </script>

4.2正则表达式参数

/表达式/[switch]

switch(也称为修饰符)按照什么样的模式来匹配，有三种值：

g：全局匹配
i：忽略大小写
gi：全局匹配+忽略大小写

小案例

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <textarea name="" id="message"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        var text=document.querySelector("#message")
        var btn=document.querySelector('button')
        var div=document.querySelector('div')
        btn.onclick=function(){
         div.innerHTML=   text.value.replace(/激情/g,'**')
        }
    </script>
    
</body>
</html>

神的恩惠。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中的正则表达式

正则表达式通常用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤页面内容中的一些敏感词（替换），或从字符串中获取想要的特定部分（提取）等。一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/。\s 匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]\S 匹配非空格的字符，相当于[^\t\r\n\v\f]
复制链接

扫一扫