前端---ES5知识点小梳理四

目录

正则表达式

创建

实例方法

构造函数创建

lastIndex

字符集合

边界符

边界符 配合 字符集和使用

\b \B

字符类

数量词

匹配QQ号

匹配身份证号

重复方式

贪婪模式

非贪婪模式 在数量词后面 ?

选择 |  类似于或者  从左向右进行匹配 匹配到之后直接输出结果

分组

捕获与引用

引用

String对正则表达式的支持            1.search            2.match            3.split            4.replace

前瞻


正则表达式

创建

var reg=/hello/修饰符

var reg=new RegExp('hello','修饰符')

实例方法

    exec  可用来匹配字符串中符合正则表达式的字符串 如果匹配到,返回值是一个result数组:

   test    用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串

var str = 'hello html hello js hello css'
var reg1 = /hello/g
console.log(reg1.exec(str));

 <!-- [
  'hello',
  index: 0,
  input: 'hello html hello js hello css',
  groups: undefined
] -->

通过循环的方式 输出所有满足条件的 必须开启全局匹配模式

while(true){
  var res = reg1.exec(str)
  if (!res) {
    break;
  }
  console.log(res);
}
//
[
  'hello',
  index: 0,
  input: 'hello html hello js hello css',
  groups: undefined
]
[
  'hello',
  index: 11,
  input: 'hello html hello js hello css',
  groups: undefined
]
[
  'hello',
  index: 20,
  input: 'hello html hello js hello css',
  groups: undefined
]

构造函数创建

// var reg2 = new RegExp('正则表达式','匹配模式')
var reg2 = new RegExp('hello','g')
// test 满足条件 返回true 不满足 返回false
console.log(reg2.test('helo 2022 helo'));
//false
console.log(typeof reg2.toString());
console.log(typeof reg2.valueOf());
//string
object

lastIndex

var str = 'hello html hello js hello css'
// 没有开启全局匹配 没有lastIndex这个属性的 每次校验都会回到其实位置 0 重新匹配
var reg1 = /hello/
// 开启全局匹配模式
var reg2 = /hello/g

console.log(reg1.lastIndex);
console.log(reg1.exec(str));
console.log(reg1.lastIndex);

console.log(reg1.lastIndex);
console.log(reg1.exec(str));
console.log(reg1.lastIndex);

<!-- 
0
[
  'hello',
  index: 0,
  input: 'hello html hello js hello css',
  groups: undefined
]
0
0
[
  'hello',
  index: 0,
  input: 'hello html hello js hello css',
  groups: undefined
]
0 -->

console.log(reg2.lastIndex);
console.log(reg2.exec(str));
console.log(reg2.lastIndex);

console.log(reg2.lastIndex);
console.log(reg2.exec(str));
console.log(reg2.lastIndex);
<!-- 
 0
[
  'hello',
  index: 0,
  input: 'hello html hello js hello css',
  groups: undefined
]
5
5
[
  'hello',
  index: 11,
  input: 'hello html hello js hello css',
  groups: undefined
]
16-->

字符集合

// [英文字母]
var reg1 = /[abc]/g
var reg2 = /[a-z]/g
console.log(reg1.test('123'));
//false


// [数字]
var reg3 = /[0-9]/g
console.log(reg3.test('hello 2022'));
//true


// [^反义字符] 记住 必须写在中括号里面
var reg4 = /[^abc]/g
console.log(reg4.test('!'));
//true

边界符

// 以谁开始
var reg1 = /^[0-9]/g
console.log(reg1.test('1ahello'));
//true


// 以谁结尾
var reg2 = /[0-9]$/
console.log(reg2.test('hello web'));
//false


// 开始和结尾  精准匹配
var reg3 = /^abc$/g
console.log(reg3.test('abc'));
//true

边界符 配合 字符集和使用

var reg4 = /^[abc]$/g
console.log(reg4.test('a'));
//true

\b \B

var str = 'Hello World Hello JavaScript';
var regb = /\bHello\b/
var regB = /\BScrip\B/
console.log(regb.test(str));
console.log(regB.test(str));
//true
//true

字符类

// . => [^\n\r]
var str = '\n'
var reg1 = /./
console.log(reg1.test(str));
//false


// \d => [0-9]
// \D => [^0-9]
var reg1 = /^\D/
var reg2 = /^[0-9]/
console.log(reg1.test('hello'));
console.log(reg2.test('hello'));
//true
//false


// \w => [a-zA-z0-9_]
// W\ => [^a-zA-z0-9_]
var reg2 = /^\w/
var reg3 = /^\W/
console.log(reg2.test('!123String'));
console.log(reg3.test('!123String'));
//false
//true

数量词

// * 大于等于0次
var reg1 = /^a*$/
console.log(reg1.test('aaaaa'));
//true


// + >=1次
var reg1 = /^a+$/
console.log(reg1.test('aaa'));

匹配QQ号

// 1.以1-9开始
// 2.5-11位
// 3.只能有数字组成
// 注意 正则表达式中 如果没有特殊需求 不要加空格
var regQQ = /^[1-9]\d{4,10}$/
console.log(regQQ.test('12312'));
//true

匹配身份证号

// 不以0开头
// 18位
// xX\d
var regId = /^[1-9]\d{16}[xX\d]$/
console.log(regId.test('23050620001112000x');
//true

重复方式

贪婪模式

var str = '123456789'
var reg1 = /\d{3,6}/g
console.log(reg1.exec(str));
console.log(reg1.exec(str));
//[ '123456', index: 0, input: '123456789', groups: undefined ]
//[ '789', index: 6, input: '123456789', groups: undefined ]

非贪婪模式 在数量词后面 ?

var str = '123456789'
var reg2 = /\d{3,6}?/g
console.log(reg2.exec(str));
console.log(reg2.exec(str));
console.log(reg2.exec(str));
console.log(reg2.exec(str));
<!-- 
[ '123', index: 0, input: '123456789', groups: undefined ]
[ '456', index: 3, input: '123456789', groups: undefined ]
[ '789', index: 6, input: '123456789', groups: undefined ]
null
 -->

选择 |  类似于或者  从左向右进行匹配 匹配到之后直接输出结果

var reg1 = /html|css|js/g
console.log(reg1.exec('Hello html hello css hello js'));
console.log(reg1.exec('Hello html hello css hello js'));
console.log(reg1.exec('Hello html hello css hello js'));
<!-- 
[
  'html',
  index: 6,
  input: 'Hello html hello css hello js',
  groups: undefined
]
[
  'css',
  index: 17,
  input: 'Hello html hello css hello js',
  groups: undefined
]
[
  'js',
  index: 27,
  input: 'Hello html hello css hello js',
  groups: undefined
] -->

分组

// var reg2 = /studystudystudy/
var reg2 = /(study){3}/
console.log(reg2.test('studystudystudy'));
//true

捕获与引用

//捕获  以左括号计算
var regDate = /(\d{4})-(\d{2})-(\d{2})/
console.log(regDate.test('2022-08-15'));
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
<!-- 
true
2022
08
15
 -->

var reg = /((apple) is (a (fruit)))/
var str = "apple is a fruit"
reg.test(str) 
console.log(RegExp.$1); 
console.log(RegExp.$2);
console.log(RegExp.$3);
console.log(RegExp.$4);
<!-- 
apple is a fruit
apple
a fruit
fruit
 -->

引用

var reg4 = /(\w{3}) is \1/g
console.log(reg4.test('kid is dik'));
//false

String对正则表达式的支持
            1.search
            2.match
            3.split
            4.replace

var str = 'good good study day day up'
var reg1 = /hello/g
console.log(reg1.test(str));
console.log(str.search(reg1));
<!-- 
false
-1
 -->
/match
var str = 'hello world hello';
var reg1 = /hello/;
var reg2 = /hello/g;
var reg3 = /(he)llo/;
var reg4 = /(he)llo/g;


console.log(str.match(reg1));
// [ 'hello', index: 0, input: 'hello world hello', groups: undefined ]

console.log(str.match(reg2));
// [ 'hello', 'hello' ]

console.log(str.match(reg3));
//[
  'hello',
  'he',
  index: 0,
  input: 'hello world hello',
  groups: undefined
]

console.log(str.match(reg4));
//[ 'hello', 'hello' ]

// replace 查找满足正则表达式的结果 并且进行替换
var str = 'hello html hello css hello js'
var reg2 = /hello/g
// 替换后的结果
var res = str.replace(reg2,'study')
console.log(res);
<!-- 
 study html study css study js
 -->

// split
// 以某种形式分割字符串 split()
var str = "hello123html456hello78css9hello0js";
// + 当数字出现一次或多次时
var reg = /\d+/;
var result = str.split(reg);
console.log(result);
<!-- 
 [ 'hello', 'html', 'hello', 'css', 'hello', 'js' ]
 -->

前瞻

// 正向前瞻
var str = 'Hello, Hi, I am Hilary.';
// 后面一定要匹配什么
var reg = /H(?=i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);
//Hello, Ti, I am Tilary.

// 负向前瞻
var str = 'Hello, Hi, I am Hilary.';
// 后面一定不要匹配什么
var reg = /H(?!i)/g;
var newStr = str.replace(reg, "T");
console.log(newStr);
//Tello, Hi, I am Hilary.

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值