教你轻松搞定javascript中的正则

叫我詹躲躲 2020-11-06 20:37:32
javascript 正则 搞定 教你 轻松



1 正则表达式概述

1.1 什么是正则表达式

正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在Javascript中,正则表达式也是对象。
正则表通常被用来检索,替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词,或从字符串从获取我们需要的特定部分(提取)等。

1.2 正则表达式特点

  1. 灵活性、逻辑性和功能性非常强
  2. 可以迅速地用极其简单的方式达到字符串的复杂控制
  3. 比较难懂

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

2.1 创建正则表达式

  1. 通过RegExp对象的构造函数创建
var 变量名 = new RegExp(/表达式/)
// 利用RegExp创建对象
var regexp = new RegExp(/123/)
console.log(regexp)
  1. 通过字面量创建
var 变量名 = /表达式/
var rg = /123/
console.log(rg)

2.2 测试正则表达式 test

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

regexObj.test(str)
  • regexObj是写的正则表达式
  • str 我们要测试的文本
  • 就是检测str文本是否符合我们写的正则表达式规范
var rg = /123/
console.log(rg.test(123)) //true
console.log(rg.test('abc')) //false 

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

3.1 正则表达式的组成

一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/ab*c/。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号。
由于特殊字符比较多,在这里不再一一列举,可以参考:
MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
在这里可以把元字符划分为几类学习:

3.2 边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符。
image.png
如果^和$同时存在,则达到精确匹配

var rg= /abc/ //正则表达式里面不需要加引号
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // true
console.log(rg.test('aabcd')) // true
var reg = /^abc/
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // true
console.log(rg.test('aabcd')) // false
var reg = /^abc$/ //精确匹配,要求必须是abc字符串才符合规范
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // false
console.log(rg.test('aabcd')) // false
console.log(rg.test('abcabc')) // false

3.3 字符类

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

var rg = /[abc]/; //只要包含有a 或者b 或者c 都返回true
console.log(rg.test('andy')) //true
var rg = /[abc]/; //只要包含有a 或者b 或者c 都返回true
console.log(rg.test('baby')) //true
console.log(rg.test('color')) //true
console.log(rg.test('red')) //false
var rg = /^[abc]$/ //三选一 只有a 或者是b 或者是c, 这三个字母才返回true
console.log(rg.test('aa')) //false
console.log(rg.test('a')) //true
console.log(rg.test('b')) //true
console.log(rg.test('c')) //true
console.log(rg.test('abc')) //false
var rg = /^[a-z]$/ //26个英文字母任何一个字母返回true
var rg = /^[a-zA-Z]$/ //26个英文字母(大写小写)任何一个字母返回true
var rg = /^[a-zA-Z0-9_-]$/
console.log(rg.test('c')) //true
console.log(rg.test('B')) //true
console.log(rg.test('_')) //true
console.log(rg.test('8')) //true
console.log(rg.test('-')) //true
//如果中括号里面有^,表示取反的意思,要和边界符^别混淆
var rg = /^[^a-zA-Z]$/

3.4 量词符

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

var reg = /^a*$/
console.log(reg.test(''))// true
console.log(reg.test('a'))// true
console.log(reg.test('aaa'))// true
var reg = /^a+$/
console.log(reg.test(''))// false
console.log(reg.test('a'))// true
console.log(reg.test('aaa'))// true
var reg = /^a?$/
console.log(reg.test(''))// true
console.log(reg.test('a'))// true
console.log(reg.test('aaa'))// false
var reg = /^a{3}$/
console.log(reg.test(''))// false
console.log(reg.test('a'))// false
console.log(reg.test('aaa'))// true
var reg = /^a{3,}$/
console.log(reg.test(''))// false
console.log(reg.test('a'))// false
console.log(reg.test('aaa'))// true
console.log(reg.test('aaaaa'))// true
var reg = /^a{
3,5}$/ //{3,5} 逗号后不要空格
console.log(reg.test(''))// false
console.log(reg.test('a'))// false
console.log(reg.test('aaa'))// true
console.log(reg.test('aaaaa'))// true

用户名验证

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

用户名验证分析:

  1. 用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.
  2. 首先准备好这种正则表达式模式
  3. 如果符合正则规范, 则让后面的span标签添加 right 类.
  4. 如果不符合正则规范, 则让后面的span标签添加 wrong 类.
<input type="text" class="uname"> <span>请输入用户名</span>
<style> span {  color: #aaa; font-size: 14px; } .right {  color: green; } .wrong {  color: red; } </style>
var reg=/^[a-zA-Z0-9-_]{6,16}$/
var uname = doucument.querySelector('.uname');
var spn = doucument.querySelector('span');
uname.onblur = function() {

if(res.test(this.value)){

span.className='right'
span.innerHTML = '用户名输入格式正确'
} else {

span.className='wrong'
span.innerHTML = '用户名输入格式错误'
}
}

3.5 括号总结

  1. 大括号:量词符 里面表示重复次数
  2. 中括号 : 字符集合。匹配方括号中的任意字符
  3. 小括号:表示 优先级
//中括号
var reg = /^[abc]$/ //a||b||c
//大括号
var reg = /^abc{
3}$/ //它只是让c重复三次
//小括号
var reg = /^(abc){
3}$/ //abc重复三次

3.6 预定义类

预定义类指的时候某些常见模式的简写方式
image.png

座机号码验证

var reg= /^\d{
3}-\d{
8}|\d{
4}-\d{
7}$/ // |是或的意思
var reg= /^\d{3,4}-\d{7,8}|\d{4}-\d{7}$/

4 正则表达式中的替换

4.1 replace 替换

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

stringObject.replace(regxp/substr, replacement)
  1. 第一个参数:被替换的字符串或者正则表达式
  2. 第二个参数:替换为的字符串
  3. 返回值是一个替换完毕的新字符串
var str = 'lanfeng和qianduan'
var newStr = str.replace('front', 'qianduan')
console.log(newstr)

留言过滤敏感词

<textarea name="" id="message"></textarea> <button>提交</button>
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var div = doucment.querySelector('div');
btn.onclick = function () {

div.innerHTML = text.value.replace(/激情/g, '**')
}

4.2 正则表达式参数

/表达式/[switch]

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

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

总结

本篇文章主要分享了javascript中正则的一些知识点及用法。

版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558942

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云