JavaScript正则表达式:正则表达式中的特殊字符

news2024/9/21 18:29:11

正则表达式的组成

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

特殊字符非常多,可以参考:

MDN:正则表达式 - JavaScript | MDN (mozilla.org)

jQuery 手册:正则表达式部分

正则测试工具: 在线正则表达式测试

这里我们把元字符划分几类学习

边界

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符

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

字符类

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

1. []  方括号   (就是或者的意思)

/[abc]/.test('andy')     // true 

 后面的字符串只要包含 abc 中任意一个字符,都返回 true

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

/^[a-z]$/.test(c')     // true

方括号内部加上 - 表示范围,这里表示 a z 26个英文字母都可以

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

   /[^abc]/.test('andy')     // false

括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false

注意和边界符 ^ 区别,边界符写到方括号外面。 

外边是边界符是开头的意思 里面是取反的意思

上面正则表达式的意思为一个字符不能是大小写字母数字_- 

4. 字符组合

/[a-z1-9]/.test('andy')     // true

方括号内部可以使用字符组合,这里表示包含 a z 26个英文字母和 1 9 的数字可以。

 量词符

量词符用来设定某个模式出现的次数

 

 * 相当于 >= 0 可以出现0次或者很多次

+ 相当于 >= 1 可以出现1次或者很多次

?  相当于 1 || 0

 {3} 就是重复3次 

 {3, }  大于等于3

{3,16}  大于等于3 并且 小于等于16

用户名验证

功能需求:

1. 如果用户名输入合法 , 则后面提示信息为 用户名合法 , 并且颜色为绿色
2. 如果用户名输入不合法 , 则后面提示信息为 用户名不符合规范 , 并且颜色为绿色

案例:用户名验证分析

分析:

1.用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16.

2.首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/

3.当表单失去焦点就开始验证.

4.如果符合正则规范, 则让后面的span标签添加 right .

5. 如果不符合正则规范 , 则让后面的 span 标签添加 wrong .
<!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>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green;
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname"> <span>请输入用户名</span>
    <script>
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
        var uname=document.querySelector(".uname");
        var span=document.querySelector("span")
        uname.onblur=function(){
            if(reg.test(this.value)){
                console.log('正确的');
                span.className='right'
                span.innerHTML='用户名格式输入正确'
            }else{
                span.className='wrong'
                span.innerHTML='用户名格式输入不正确'
            }
        }
    </script>
</body>

</html>
括号总结
1. 大括号  量词符 .   里面表示重复 次数
2. 中括号 字符 集合。匹配方括号中的任意 字符 .(多选一)
3. 小括号 表示 优先级

var reg = /^abc{3}$/; // 它只是让c重复三次   abccc

如果想要abc重复,那就需要使用() 例如 var reg = /^(abc){3}$/; // 它是让abcc重复三次 

可以在线测试 : 菜鸟工具 - 不止于工具

 预定义类

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

 发现菜鸟的正则表达式测试并不好用,下面的是新的测试工具

在线正则表达式测试 (oschina.net)

 分析:

1. 手机号码 :  /^ 1[3|4|5|7|8][0-9]{9 }$/
2. QQ: [1-9 ][0-9]{4,} ( 腾讯 QQ 号从 10000 开始 )
3. 昵称是中文 :     ^[\u4e00-\u9fa5 ]{2,8}$

window.onload = function() {
    var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式
    var regqq = /^[1-9]\d{4,}$/; // 10000
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/;
    var regmsg = /^\d{6}$/;
    var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var nc = document.querySelector('#nc');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    regexp(tel, regtel); // 手机号码
    regexp(qq, regqq); // qq号码
    regexp(nc, regnc); // 昵称
    regexp(msg, regmsg); // 短信验证
    regexp(pwd, regpwd); // 密码框
    // 表单验证的函数
    function regexp(ele, reg) {
        ele.onblur = function() {
            if (reg.test(this.value)) {
                // console.log('正确的');
                this.nextElementSibling.className = 'success';
                this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
            } else {
                // console.log('不正确');
                this.nextElementSibling.className = 'error';
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确,请从新输入 ';
            }
        }
    };

    surepwd.onblur = function() {
        if (this.value == pwd.value) {
            this.nextElementSibling.className = 'success';
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
        } else {
            this.nextElementSibling.className = 'error';
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次密码输入不一致';

        }
    }

}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/58063.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

logos_HSST简要说明

HSST分为PCS和PMA&#xff0c; TX PCS&#xff1a;8b/10b编码 RX PCS TX PMA RX PMA 含1个HSST&#xff0c;有4个全双工收发LANE。 LINE和PLL的关系 PLL0可以为4个LANE提供时钟&#xff0c;PLL1只能为LANE2&3提供时钟。 PLL VCO 的转出频率范围为 2.125GHz~3.1875GHz。PLL…

【关于Linux中----文件接口、描述符、重定向、系统调用和缓冲区】

文章目录一、C文件接口中的那些事儿二、接口介绍三、文件描述符fd四、重定向五、缓冲区一、C文件接口中的那些事儿 众所周知&#xff0c;Linux是用C语言写成的&#xff0c;那在这篇文章的开头&#xff0c;自然要先对C语言中的文件操作进行一个概括&#xff01; 写文件&#x…

20221203英语学习

今日新词&#xff1a; lecturer n.讲演者, 讲课者, 讲授者, &#xff08;尤指英国大学的&#xff09;讲师 hypothetical adj.假设的, 假定的 rather adv.相当; 宁可, 宁愿; (常用于or后) 更确切些 ring n.戒指, 指环, 环状物; 圆圈; 敲钟, 按铃; 铃声, 钟声 yes adv.(回答…

1.2 Hadoop简介-hadoop-最全最完整的保姆级的java大数据学习资料

文章目录1.2 Hadoop简介1.2.1 什么是Hadoop1.2.2 Hadoop的起源1.2.3 Hadoop的特点1.2.4 Hadoop的发行版本1.2.5 Apache Hadoop版本更迭1.2.6 第六节 Hadoop的优缺点1.2 Hadoop简介 1.2.1 什么是Hadoop ​ Hadoop 是一个适合大数据的分布式存储和计算平台 ​ 如前所述&#x…

html5期末大作业:基于HTML+CSS技术实现——传统手工艺术雕刻网站(3页)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

深度强化学习的组合优化[1] 综述阅读笔记

文章目录前言零、组合优化问题基础1. 定义&#xff08;1&#xff09;定义&#xff08;2&#xff09;常见问题2. 方法&#xff08;1&#xff09;精确方法&#xff08;2&#xff09;近似方法&#xff08;3&#xff09;深度学习方法3. 文章架构一、概述1. 神经网络&#xff08;1&a…

【图文教程】若依前后端分离版本-菜单怎么设置

在使用若依前后端分离版本作为基础架构的时候&#xff0c;需要新建菜单怎么操作&#xff1f;本文凯哥将详细讲解怎么添加。 1&#xff1a;登录若依系统后&#xff0c;[系统管理]>>[菜单] 先新建一个一级菜单。可以模仿【系统管理】菜单来创建&#xff1a; 系统菜单&am…

226.翻转二叉树

226.翻转二叉树 题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,…

神器必会!特别好使的编辑器Source Insight

已剪辑自: https://mp.weixin.qq.com/s/nA9VJeMjC4gDpDSI8r-2FA “Source Insight&#xff08;以下简称SI&#xff09;是世界上最好的编辑器”&#xff0c;说这句话不知道会不会出门被打呢&#xff1f;-_- 中国古话说得好&#xff0c;“文无第一&#xff0c;武无第二”&#x…

都2202年了,不会有人还不会发布npm包吧

背景 介绍了axios的二次封装用于支持常规请求及自定义请求&#xff0c;并对同一时间内的相同请求做拦截处理&#xff08;如果您没有阅读过这篇文章&#xff0c;建议您花费3分钟大致了解&#xff09;。恰逢最近准备写一个跨框架组件库&#xff08;工作量很大&#xff0c;前端三…

浏览器存储(webStorage)常用API以及简单使用

前言 最近正值世纪杯期间&#xff0c;不知道大家心目中的球队成绩如何&#xff0c;在此期间我学了浏览器存储(webStorage)以及API,下面就分享给大家 浏览器存储(webStorage) 存储内容不是Vue团队打造的&#xff0c;原本的js中就有&#xff0c;所以可以不适用脚手架编译&…

UGUI性能优化学习笔记(番外)一些零星的优化点

一、Overdraw 1.1 什么是Overdraw overdraw也就是过度绘制&#xff0c;是指在每个渲染周期内&#xff0c;屏幕上每个像素最理想只渲染一次&#xff0c;但是由于UI元素的重叠会导致像素会被渲染多次&#xff0c;每次渲染从CPU阶段到GPU阶段会消耗大量资源&#xff0c;如果这种…

[附源码]计算机毕业设计JAVA学习资源共享与在线学习系统

[附源码]计算机毕业设计JAVA学习资源共享与在线学习系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; S…

Spring统一异常处理捕获不到CompletableFuture异步编排中的异常的问题

Spring统一异常处理捕获不到CompletableFuture异步编排中的异常的问题Spring统一异常处理捕获不到CompletableFuture异步编排中的异常的问题Spring统一异常处理简单例子多线程无法捕获场合正常场合&#xff08;不使用异步编排&#xff09;代码ServiceImExcpHandlerController结…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校车辆租赁管理系统23qhn

要开始我们毕业设计的第一步的关键就是选好我们的课题&#xff0c;有的同学开始选题的时候想着按照传统的课题延续下去&#xff0c;在设计题目时&#xff0c;不要过于笼统广泛&#xff0c;选择题目其实并不难&#xff0c;要多从自身的角度出发&#xff0c;要结合你们当前所处的…

【java】网络编程

文章目录网络编程概述基本概念IP地址概念InetAddress端口与协议概念UDP通信编程UDP发送数据UDP接受数据UDP通信程序练习TCP通信编程TCP发送数据TCP接收数据TCP通信程序练习网络编程概述 基本概念 IP地址概念 终端检查&#xff1a; InetAddress package heima.网络编程;impor…

nginx配置文件 location语法

1&#xff1a;nginx官方文档给出location语法如下&#xff1a; location [|~|~*|^~] uri { ....... }2&#xff1a;路径匹配 开头表示精确匹配。如 A 中只匹配根目录结尾的请求&#xff0c;后面不能带任何字符串&#xff1b;^~ 开头表示uri以某个常规字符串开头&#xff0c;不是…

字符串中第二大的数字(遍历)

力扣链接&#xff1a;力扣 给你一个混合字符串 s &#xff0c;请你返回 s 中 第二大 的数字&#xff0c;如果不存在第二大的数字&#xff0c;请你返回 -1 。 混合字符串 由小写英文字母和数字组成。 示例 1&#xff1a; 输入&#xff1a;s "dfa12321afd" 输出&…

Keras生成式学习(五)

生成式深度学习 生成式学习即创造学习&#xff0c;深度学习开始创造 一、使用LSTM 生成文本 给定前面的标记&#xff08;token&#xff0c;通常是单词或字符&#xff09;&#xff0c;能够对下一个标记的概率进行建模的任何网络都叫作语言模型&#xff08;language model&…

Android Camera性能分析 - 第25讲 CameraServer LatencyHistogram简介

本讲是Android Camera性能分析专题的第25讲 ​&#xff0c;我们介绍CameraServer LatencyHistogram简介&#xff0c;包括如下内容&#xff1a; LatencyHistogram是什么CameraServer默认有哪些Latency的Histogram如何获取CameraLatencyHistogram数据CameraLatencyHistogram类详…