正则表达式（一）

最新推荐文章于 2023-04-27 11:31:59 发布

暮白寒窗雪

最新推荐文章于 2023-04-27 11:31:59 发布

阅读量513

点赞数 4

文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/tiben/article/details/118885760

版权

正则表达式边界符预定义类取反符 test()方法

关键词由CSDN通过智能技术生成

正则表达式基本知识

1、正则表达式：是一种描述字符串结构的语法规则，是用于匹配字符串中字符组合的模式，同时正则表达式也是对象
2、特点

正则表达式的灵活性
逻辑性和功能性非常强
可以迅速地用极简单的方式达到字符串的复杂控制
3、正则表达式的使用
创建正则对象

// 字面量方式
var 变量名 = /表达式/;
// RegExp构造函数方式
// 或者var 变量名 = RegExp(/表达式/);
var 变量名 = new RegExp(/表达式/);

案例演示：test()方法来检测字符串是否符合正则规则

var str = '123'
var reg1 = new RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)) ; // 匹配结果为：true
console.log(reg2.test(str)) ; // 匹配结果为：false

4、模式修饰符
模式修饰符：基本语法/表达式/[switch]
switch ：表示模式修饰符，是可选的，用于进一步对正则表达式进行设置
在这里插入图片描述

正则表达式的特殊字符

1、边界符：正则表达式中的边界符（位置符）用来提示字符所处的位置

^：匹配行首的文本(以给定字符开头的)
$：匹配行尾的文本(以给定字符结尾的)

var reg = /^abc$/;
console.log(reg.test('abc’));      // 结果为：true
console.log(reg.test('abcd’));     // 结果为：false
console.log(reg.test('aabcd’));    // 结果为：false
console.log(reg.test('abcabc’));  // 结果为：false

2、预定义类
在这里插入图片描述注：在正则表达式中可以使用“\”转义特殊字符，通过’'可以将正则表达式中的修饰符、边界符、预定义符等转换为普通字符
3、字符类：是一个字符集，匹配相应字符，它就会找到该匹配项
字符范围示例：
在这里插入图片描述案例演示

var reg = /[abc]/;
console.log(reg.test('andy’));   // 结果为：true
console.log(reg.test('baby’));   // 结果为：true
console.log(reg.test('color’));  // 结果为：true
console.log(reg.test('red’));   // 结果为：flase
var rg = /^[abc]$/;
console.log(rg.test('a’));       // 结果为：true
console.log(rg.test('aa’));       // 结果为：false
console.log(rg.test('b’));        // 结果为：true
console.log(rg.test('c’));        // 结果为：true
console.log(rg.test('abc’));     // 结果为：flase

注：
①强调：var rg = /¹$/; 不能同时用a、b、c去匹配字符串的开头和结尾
②如果允许用户输入英文字母（不区分大小写）、数字、短横线-、下划线_的正则情况下，正确的正则表达式为：

var reg =  /^[a-zA-Z0-9_-]$/;

4、取反符：当中括号“[]”与元字符“^”一起使用时，称为取反符
案例:用户名验证

<style>
    .success{
        color: green;
    }
    .wrong{
        color: red;
    }
</style>
<body>
    <input type="text" class="unname">
    <span></span>

    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/
        var unname = document.querySelector('.unname')  //获取input标签对象
        var span = document.querySelector('span')

        //给input注册失去焦点时的事件
        // unname.addEventListener('blur',function(){})
        unname.onblur = function(){
            if(reg.test(this.value)){
                span.className = 'success'
                span.innerHTML = '用户名可用'
            }else{
                span.className = 'wrong'
                span.innerHTML = '用户名不可用'
            }
        }
    </script>
</body>

abc ↩︎

暮白寒窗雪

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
正则表达式（一）

目录正则表达式基本知识正则表达式的特殊字符正则表达式基本知识1、正则表达式：是一种描述字符串结构的语法规则，是用于匹配字符串中字符组合的模式，同时正则表达式也是对象2、特点正则表达式的灵活性逻辑性和功能性非常强可以迅速地用极简单的方式达到字符串的复杂控制3、正则表达式的使用创建正则对象// 字面量方式var 变量名 = /表达式/;// RegExp构造函数方式// 或者var 变量名 = RegExp(/表达式/);var 变量名 = new RegExp(/表达式/);
复制链接

扫一扫