当前位置: 首页 > news >正文

JS入门到精通 正则详解(11)

正则表达式概述

  1. 什么是正则表达式?

检测字符串的一组规则。
  1. 正则表达式的作用?

主要用于表单验证(text)
处理复杂的字符串。(exec)

如何声明正则表达式?

  1. 字面量方式:

/正则表达式/标志位
  1. 构造函数方式:(规则从变量中获取的时候)

new RegExp('正则表达式','标志位')

正则表达式的方法?

  1. 正则表达式.test(字符串) : 检测字符串中是否包含了正则的内容,如果包含了,则返回true,否则,返回false.

  1. 正则表达式.exec(字符串) : 将字符串中匹配到正则的内容以数组的方式返回。如果没有匹配的内容,返回null(有g的时候有一个就返回)

处理正则表达式的字符串方法?

  1. 字符串.match(正则) : 将字符串中匹配到正则的内容以数组的方式返回。如果没有匹配的内容,返回null(有g的时候有几个回几个)

  1. 字符串.search(正则) : 与indexOf的功能相同,查找正则匹配的内容在父串中第一次出现的下标位置 ,如果没有找到,返回 -1

var re = /de/;
var str = 'how do you do';
console.log(str.search(re)); //-1

exec与match的区别:

//1. 无g无组的情况
var re = /do/;
var str = 'how do you do';
console.log(re.exec(str)); //['do']
console.log(str.match(re)); //['do']

//2. 有g无组的情况
var re = /do/g;
var str = 'how do you do';
console.log(re.exec(str)); //['do']
console.log(str.match(re)); //['do','do']

//3. 无g有组的情况
var re = /([a-z]+) (\d+)/;
var str = 'haha 2022';
console.log(re.exec(str)); //['haha 2022','haha','2022']
console.log(str.match(re)); //['haha 2022','haha','2022']

//3. 有g有组的情况
var re = /([a-z]+) (\d+)/g;
var str = 'haha 2022,hehe 2023';
console.log(re.exec(str)); //['haha 2022','haha','2022']
console.log(str.match(re)); //['haha 2022', 'hehe 2023']

正则表达式的元字符 (三、三、二、三个一)

三: {} [] ()

  1. {} : 表示{}前面的一个或一组字符连续出现的次数。

{m} : 表示{}前面的一个或一组字符连续出现 m 次
var str = 'ooo';
var re = /^o{3}$/;
console.log(re.test(str)); //true
{m,} : 表示{}前面的一个或一组字符连续出现 m 至 无限次,至少出现m次
var str = 'ooooooooooooooooooooo';
var re = /^o{3,}$/;
console.log(re.test(str)); //true
{m,n} : 表示{}前面的一个或一组字符连续出现 m 至 n次。
var str = 'oooo';
var re = /^o{3,5}$/;
console.log(re.test(str)); //true
  1. [] : 表示取值范围

var re = /^[abc]{2,5}$/;
var str = 'aaaa';
console.log(re.test(str));

var re = /^[a-z]{2,5}$/;
var str = 'what';
console.log(re.test(str));

var re = /^[a-z]{2,5}$/i;
var str = 'What';
console.log(re.test(str));

var re = /^[a-zA-Z]{2,5}$/;
var str = 'What';
console.log(re.test(str));

var re = /^[0-9]{6}$/;
var str = '666888';
console.log(re.test(str));

var re = /^[a-zA-Z0-9_]{8,16}$/
var str = 'abc_123456';
console.log(re.test(str));

var re = /^[\u4e00-\u9fa5]{3,}$/
var str = '张小三';
console.log(re.test(str));
  1. () : 表示组

var re = /^(中国){2,}$/
var str = '中国中国';
console.log(re.test(str));

三: * + ?(不限制次数的话只能出现一次)

  1. : 表示*号前面的一个或一组字符连续出现 0 至 无限次 {0,}

var re = /^do*$/
var str = 'd';
console.log(re.test(str));
  1. +: 表示+号前面的一个或一组字符连续出现 1 至 无限次 {1,}

var re = /^do+$/
var str = 'doooooooooooo';
console.log(re.test(str));
  1. ? : 表示?号前面的一个或一组字符连续出现 0 至 1 次 {0,1}

var re = /^do?$/
var str = 'd';
console.log(re.test(str));

二: ^ $

  1. ^

写在正则表达式的开头,表示断头,限制字符串的开头必须是指定的字符。
写在[]的开头,表示取反
var re = /^[^0-9]+/
var str = 'd45678';
console.log(re.test(str));

var re = /^[^0-9]+$/
var str = 'd!@#$%';
console.log(re.test(str));
  1. $

表示断尾,限制字符串的结尾必须是指定的字符。
var re = /!$/
var str = 'How do you do!';
console.log(re.test(str));

三个一 : . | \

  1. . : 表示模糊匹配任意一个字符。

var re = /^h.*w$/;
var str = 'h2345r6t7y8uiokjfder56789iokw';
console.log(re.test(str));
  1. | : 表示或,一般结合组一起使用。

var re = /^(男|女)$/;
var  str = '男';
console.log(re.test(str));
  1. \ : 表示转义符,将具有特殊含义的符号转为普通字符。

//文件类型(后缀)(扩展名)  .html   .js   .css   .mp4  .c   
var re = /\.[a-zA-Z0-9]{1,4}$/;
var str = 'index.html';
console.log(re.test(str));
\d : 表示数字 [0-9]
//邮政编码
var re = /^\d{6}$/;
var str = '034017';
console.log(re.test(str));

//手机号
var re = /^1(1|2|3|4|5|6|7|8|9)\d{9}$/;
var str = '17710875717';
console.log(re.test(str));

// 2022/7/20
var re = /^(\d{4}|\d{2})\/\d{1,2}\/\d{1,2}$/;
var  str = '22/7/20';
console.log(re.test(str));
\D : 表示非数字
\w : 表示字母、数字、下划线 [a-zA-Z_]
//京东密码规则
var re = /^\w{8,16}$/;
var str = 'abc_12345678';
console.log(re.test(str));
\W : 表示 非(字母、数字、下划线)
\s : 表示空白
\S : 表示非空白
\b : 表示单词边界
\B : 表示非边界

正则表达式的标志位

  1. g : 全局匹配,匹配出所有的匹配项,并非在发现第一个匹配项时就立即停止

  1. i : 不区分大小写字母

  1. m: 表示多行模式(multiline),可以进行多行匹配,但是只有使用^和$模式时才起作用,在其他模式中,加不加入m都可以进行多行匹配

案例分析

var pattern = /(google){4,8}/; 
var str = 'googlegoogle'; 
alert(pattern.test(str));
var pattern = /(google|baidu|bing)/; 
var str = 'google'; 
alert(pattern.test(str));
var pattern = /goo\sgle/; 
var str = 'goo gle'; 
alert(pattern.test(str));
var pattern = /google\b/; 
var str = 'google'; 
var str2= 'googleaa googlexx google dsdddd'; alert(pattern.test(str));
var pattern = /g\w*gle/; 
var str = 'google'; 
alert(pattern.test(str));
var pattern = /google\d*/; 
var str = 'google444';
alert(pattern.test(str));
var pattern = /\D{7,}/; 
var str = 'google8'; 
alert(pattern.test(str));
var pattern = /g[a-zA-Z_]*gle/; 
var str = 'google'; 
alert(pattern.test(str));
var pattern = /g[^0-9]*gle/; 
var str = 'google'; 
alert(pattern.test(str));
var pattern = /[a-z][A-Z]+/; 
var str = 'gOOGLE'; 
alert(pattern.test(str));
var pattern = /g.*gle/; 
var str = 'google'; 
alert(pattern.test(str));
var pattern = /^[a-z]+\s[0-9]{4}$/i; 
var str = 'google 2012'; 
alert(pattern.exec(str));
var pattern = /^[a-z]+/i; 
var str = 'google 2012'; 
alert(pattern.exec(str));
var pattern = /^([a-z]+)\s([0-9]{4})$/i; 
var str = 'google 2012'; 
alert(pattern.exec(str)[0]); 
alert(pattern.exec(str)[1]); 
alert(pattern.exec(str)[2]);
var pattern = /Good/ig; 
var str = “good good study!,day day up!”; alert(str.replace(pattern,’hard’));
var pattern = /(.*)\s(.*)/; 
var str = 'google baidu'; 
var result = str.replace(pattern, '$2 $1'); document.write(result)
var pattern = /8(.*)8/; 
var str = 'This is 8google8'; 
var result = str.replace(pattern,'<strong>$1</strong>'); document.write(result);
Var pattern = /good/ig; 
var str = ‘good good study!,day day up!’;
alert(str.match(pattern)); alert(str.match(pattern).length);
var pattern = /8(.*)8/; 
var str = 'This is 8google8, dd 8ggg8'; alert(str.match(pattern)); alert(RegExp.$1);
var pattern = /good/ig; 
var str = ‘good good study!,day day up!’; alert(str.search(pattern));
  1. 手机号检测

  1. Xxxx 年 xx 月 xx 日

  1. 12/25/2016

  1. 用户名由 3-10 位的字母下划线和数字组成。不能以数字或下划线开头。只能已字母开头。允许全部是字母

  1. 字符串过滤(首尾空格)

  1. (扩展)至少有两种(字母、数字、下划线、!@#.)6 到 12 位

/^(?![\d]+$)(?![a-zA-Z]+$)(?![\W]+$)[\da-zA-Z_!@#\.]{6,12}$/

相关文章:

  • 建网站一般多少钱幸福里/怎么才能让百度收录网站
  • wordpress的特点/世界羽联巡回赛总决赛
  • 免费seo在线工具/上海优质网站seo有哪些
  • wordpress 文章列表样式/基本营销策略有哪些
  • 济宁企业网站建设/nba最新排名榜
  • 微信漫画网站模板/整合营销策略
  • 第五届字节跳动青训营 前端进阶学习笔记(二)JavaScript编码规范
  • 字节青训营Go语言学习第一天--基础语言+实战案例
  • 小红书找达人如何避坑?怎么知道数据是不是刷出来的
  • 多线程之常见的锁策略
  • Scrum术语表
  • 四旋翼无人机学习第20节--PCB自动保存文件labview设计
  • 5、数组的创建和操作
  • <Python>使用python来控制windows系统音量
  • VsCode简单使用,配置c/c++编译环境,个人感受
  • 【手写 Vue2.x 源码】专栏目录与重构规划
  • 河北沃克金属制品有限公司|2023年春节放假通知
  • 监控圈子行业黑话