JavaScript正则表达式

2023-11-01

正则表达式大白话就是一个能判定你的输入内容是否符合设计者规定的一个式子

作用:

(1)测试字符串是否合规,被用来检测前端输入的字段是否符合要求,常见的场景是注册时输入账号、密码、邮箱等的测试

(2)替换某确定的文本,通过js批量替换某个已存在的文本,替换为我们需要的文本,作用场景比较多

(3)从字符串中 提取一个子字符串/是否包含某子字符串,不常用,通过设置提取需求,从长字符串批量提取子字符串。第二重特性,是否包含某子字符串,可以用来过滤一些字符串

一、创建正则表达式

var  regexp_1 = /a/;
var  regexp_2 = new Regexp("a"); 

二、常见的正则表达式属性

(1)三种匹配规则

匹配规则符号 规则含义
i 匹配时忽略大小写
g 执行全局匹配(会匹配整个语句,而非匹配到第一个目标后终止)
m 执行多行匹配

(2)语法

var  regexp_1 = /a/i;
var  regexp_2 = /a/g;
var  regexp_3 = /a/m;
 
var  regexp_4 = new Regexp("a","i"); 
var  regexp_5 = new Regexp("a","g"); 
var  regexp_6 = new Regexp("a","m"); 
 
var  regexp_7 = new Regexp("a","igm"); 
var  regexp_8 = /a/igm; 

(3)五种常见属性

属性 说明
ignoreCase 返回一个布尔值True代表正则表达式设置了 i 匹配规则(忽略大小写)False代表未设置。
global 返回一个布尔值True代表正则表达式设置了 g 匹配规则(全局匹配)False代表未设置。
multiline 返回一个布尔值True代表正则表达式设置了 m 匹配规则(多行匹配)False代表未设置。
lastIndex 返回一个int值,表示下一次搜索开始的索引位置只在设置了 g 匹配规则时才有实用意义
source 返回一个字符串,字符串是正则表达式的字符串形式(不含斜线)

lastIndex的用法(只在设置了 g 匹配规则时才有实用意义):

它代表了下一次正则表达式匹配的起始索引:

<script>
    function demo() {
        var regexp = /s/g
        var str = 's_s_s_s_s_s_s_s'
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        }
    demo()
</script>

注意,这里弹出的并不是索引,是索引加一,减去一就是真正的索引

三、常见的正则表达式方法

  1. test方法

test() 方法是正则表达式最常用一个方法,用于检测一个字符串是否匹配某个模式

test ()方法检查字符串是否与给出的正则表达式模式相匹配,如果是则返回 true,否则就返回 false。同时搭配g模式,test方法也可以进行全文的检查

  1. 正则子表达式匹配

对于这样一个式子:

str = 'st_s_s_s_s_s_s_s'

先匹配一下st_,匹配到之后再匹配一下里面的 t 和 _ ,也就是我想要一次把st_ 、t 和 _ 都匹配出来,可以这样写:

const regexp = /s(t)(_)/

括号的内容代表子表达式,而且在第一次匹配时,它会默认把所有的括号去掉,做一个整体匹配,例如上面的例子,第一波匹配时,表达式相当于是: /st_/ 。

只有整体匹配成功,后面的子字符串匹配才会被执行匹配,否则如果整体没有匹配到,即使子字符串能匹配到内容,也都会被返回空值

  1. exec方法

exec() 方法检索字符串中的指定值返回值是被找到的值。如果没有发现匹配,则返回 null

在使用 “g” 参数时,exec() 的工作原理如下:
(1)找到第一个 “e”,并存储其位置;

(2)exec()方法只会执行一次匹配,如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 “e”,并存储其位置;

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null) 
//输出:eeeeeenull
  1. compile()

compile() 方法用于改变 RegExp。compile() 既可以改变检索模式,也可以添加或删除第二个参数

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));
  1. 字符串的常见函数

调用函数的对象是字符串,不是正则表达式,但是传参可以是正则表达式

(1)search():检索字符串中指定的子字符串或正则表达式相匹配的子字符串。

  • 返回找到的第一个字符的位置,如果未找到返回-1

  • 该方法将忽略"g"标志和正则对象的 lastIndex 属性(即总是从开头找起)

var index = str.search(Regexp/String);

var txt="hello world!";
document.write(txt.search("world"));    //返回值:6    此时为字符串

document.write(txt.search(/world/));    //返回值:6    此时为regexp对象

document.write(txt.search(/World/));    //返回值:-1   search()方法对大小写敏感

document.write(txt.search(/World/i));   //返回值:6    i忽略大小写的检索

(2)match():在字符串内查找一个或多个与正则表达式匹配的字符串,返回一个对象

  • 若没开启"g"标志,将只查找第一个匹配的字符串,返回一个对象
  • 该对象包含下标0、index、input,其中下标0等价于index,input是String的引用
  • 开启"g",返回一个数组,数组的length是匹配的字符串个数,每个元素是每个匹配的起始字符位置
//searchvalue:规定要检索的字符串值
StringObject.match(searchvalue)

//regexp:规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象
StringObject.match(regexp)
const regexp = /abc/
const str = 'dhabcuejabce'
let result = str.match(regexp)
console.log(result);	//{'abc', index: 2, input: 'dhabcuejabce', groups: undefined}

const regexp = /abc/g
const str = 'dhabcuejabce'
let result = str.match(regexp)
console.log(result);	//['abc', 'abc']

(3)replace() :用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串

str.replace(yourRegexp/String,new_String)

一、正则表达式字符匹配

  1. 两种模糊匹配

(1)横向模糊匹配:一个正则可匹配的字符串的长度不是固定的,可以是多种情况的

比如/ab{2,5}c/表示匹配这样一个字符串:第一个字符是“a”,接下来是2到5个字符“b”,最后是字符“c”。{m,n},表示连续出现最少m次,最多n次

var regex = /ab{2,5}c/g;
 
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
 
console.log( string.match(regex) );
 
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]
 

(2)纵向模糊匹配:一个正则匹配的字符串,具体到某一位字符时,它可以不是某个确定的字符,可以有多种可能。

比如/a[123]b/可以匹配如下三种字符串:“a1b”、“a2b”、“a3b”

var regex = /a[123]b/g;
 
var string = "a0b a1b a2b a3b a4b";
 
console.log( string.match(regex) );
 
// => ["a1b", "a2b", "a3b"]

排除字符组

例如[^abc],表示是一个除"a"、“b”、"c"之外的任意一个字符。字符组的第一位放^(脱字符),表示求反的概念

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6w25TRjc-1668434472177)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20220908103438879.png)]

img

惰性匹配:尽可能少的匹配

通过在量词后面加个问号就能实现惰性匹配

var regex = /\d{2,5}?/g;
 
var string = "123 1234 12345 123456";
 
console.log( string.match(regex) );
 
// => ["12", "12", "34", "12", "34", "12", "34", "56"]

其中/\d{2,5}?/表示,虽然2到5次都行,当2个就够的时候,就不在往下尝试了

(?=p)和(?!p),中文翻译分别是正向先行断言和负向先行断言

(?=p),其中p是一个子模式,即p前面的位置

比如(?=l),表示’l’字符前面的位置,例如:

var result = "hello".replace(/(?=l)/g, '#');
 
console.log(result);
 
// => "he#l#lo"

(?!p)就是(?=p)的反面意思,比如:

var result = "hello".replace(/(?!l)/g, '#');

console.log(result);

// => "#h#ell#o#"
  • 要求的必须包含数字,使用(?=.*[0-9])

  • 同时包含数字和小写字母,可以用(?=.*[0-9])(?=.*[a-z])

  1. 同时包含数字和小写字母
  2. 同时包含数字和大写字母
  3. 同时包含小写字母和大写字母
  4. 同时包含数字、小写字母和大写字母
var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
 
console.log( reg.test("1234567") ); // false 全是数字
 
console.log( reg.test("abcdef") ); // false 全是小写字母
 
console.log( reg.test("ABCDEFGH") ); // false 全是大写字母
 
console.log( reg.test("ab23C") ); // false 不足6位
 
console.log( reg.test("ABCDEF234") ); // true 大写字母和数字
 
console.log( reg.test("abcdEF234") ); // true 三者都有
替换

比如,想把 yyyy-mm-dd 格式

var regex = /(\d{4})-(\d{2})-(\d{2})/;
 
var string = "2017-06-12";
 
var result = string.replace(regex, "$2/$3/$1");
 
console.log(result);
 
// => "06/12/2017"
反向引用
var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
 
var string1 = "2017-06-12";
 
var string2 = "2017/06/12";
 
var string3 = "2017.06.12";
 
var string4 = "2016-06/12";
 
console.log( regex.test(string1) ); // true
 
console.log( regex.test(string2) ); // true
 
console.log( regex.test(string3) ); // true
 
console.log( regex.test(string4) ); // false

\1,表示的引用之前的那个分组(-|\/|\.)。不管它匹配到什么(比如-),\1都匹配那个同样的具体某个字符

字符串trim方法模拟

function trim(str) {
	return str.replace(/^(\s+)|(\s+)$/g, '')
}
console.log(trim(' wybsz  '));	

// => "wybsz"

捕获分组和非捕获分组

()表示捕获分组,() 会把每个分组里的匹配的值保存起来,使用$n(n是一个数字,表示第n个捕获组的内容);

(?:)表示非捕获分组,和捕获分组唯一的区别在于,非捕获分组匹配的值不会保存起来。
以formatSum 表达式为例,(?=(?:\d{3})+(?!\d)) ,(?:\d{3}) ,(?!\d) 都是分组,其中第二个分组是非捕获分组。

// 1 匹配16进制颜色值
    var regex = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/g

    // 2 匹配时间(以24小时制为例)
    var regex = /^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/g

    // 3 匹配日期(yyyy-mm-dd格式为例)
    var regex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/g

    // 4 window操作系统文件路径
    var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript正则表达式 的相关文章