JavaScript高级第04天笔记

• JavaScript高级第04天笔记
• • 0.为什么使用正则表达式 *
  • 1.正则表达式概述
  • • 1.1什么是正则表达式
    • 1.2 正则表达式的特点
  • 2.正则表达式在js中的使用
  • • 2.1正则表达式的创建
    • 2.2测试正则表达式
    • 2.3 可以使用正则的其他函数
    • • 2.3.1 search的使用
      • 2.3.2 match
      • 2.3.3 replace
  • 3.正则表达式中的特殊字符
  • • 3.1正则表达式的组成
    • 3.2边界符
    • 3.3字符类
    • • 3.3.1 [] 方括号
      • 3.3.2量词符 **
      • 3.3.4 括号总结
    • 3.4预定义类 ( 转义字符)

JavaScript高级第04天笔记

0.为什么使用正则表达式 *

举个例子：查找字符串中的数字

		var str = '3s4 d5 f6gy uiml,./567y ghv/.,';
        var arr = [];

        var temp = '';
        for(var i = 0; i < str.length; i++){
            if(str.charAt(i) >= '0' && str.charAt(i) <= '9'){
                temp += str.charAt(i);
            }else{
                if(temp){
                    arr.push[temp];  //将数字推到arr中
                    //temp 清空， 准备接收下一个数字
                    temp = '';
                }              
            }
        }
        console.log(arr);

如果使用 正则：

var re = /\d+/g;
console.log(str.match(re));

用对正则，可以省很多代码，很多力气

1.正则表达式概述

1.1什么是正则表达式

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。

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

其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript 正则表达式完成表单验证。

1.2 正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强。
2. 可以迅速地用极简单的方式达到字符串的复杂控制。
3. 对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式. 比如用户名: /¹{3,16}$/

2.正则表达式在js中的使用

2.1正则表达式的创建

在 JavaScript 中，可以通过两种方式创建一个正则表达式。

方式一：通过调用RegExp对象的构造函数创建

var regexp = new RegExp(/123/);
console.log(regexp);

方式二：利用字面量创建 正则表达式

 var rg = /123/;

2.2测试正则表达式

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

var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KW4WN5K-1630715686317)(images/img4.png)]

2.3 可以使用正则的其他函数

2.3.1 search的使用

查找符合某个正则的字符串,找到返回字符串的位置

console.log(str.search(/g/));   //查找'g'返回下标
console.log(str.search(/a/));    //没找到，返回-1

例题：判断浏览器类型 userAgent

var userA = window.navigator.userAgent;
if(userA.search(/firefox/i) != -1){
	console.log('火狐');
}else if(userA.search(/chrome/i) != -1){
  console.log('谷歌');
}else{
	console.log('其他');
}

2.3.2 match

查找符合符合正则表达式的值，返回一个数组

var rel = /\d\d/g;
console.log(str.match(rel));
var rel = /\d/g;
console.log(str.match(rel));

2.3.3 replace

将符合正则的表达式进行替换

var str = 'bhnjkm,.cfvyike,';
re = /b|j/g;      //筛选str中的b、j替换为**
var str1 = str.replace(re, '**');
console.log(str1)

例：敏感词过滤

        var text = document.querySelectorAll('textarea');
        var btn = document.querySelector('button');
        btn.onclick = function(){
            //获取过滤前的文本信息
            var str = text[0].value;
            var re = /少年|山河/g;
            var str1 = str.replace(re, '**');
            text[1].value = str1;
        }

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

3.1正则表达式的组成

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

特殊字符非常多，可以参考：

MDN

jQuery 手册：正则表达式部分

正则测试工具

3.2边界符

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

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

        //test  测试，匹配上的返回true，否则返回false
        var rel = /^abc/;
        console.log(rel.test('abc'));   //true
        console.log(rel.test('cabc'));    //false
        console.log(rel.test('abcsf'));    //true


        //开始与结束都要匹配上
        var rel1 = /^abc$/;
        console.log(rel.test('abc'));    //true
        console.log(rel.test('cabc'));   //false
        console.log(rel.test('sabcsf'));   //false

3.3字符类

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

3.3.1 [] 方括号

表示有一系列字符可供选择，只要匹配其中一个就可以了

		var str = /[abc]/;
        var str1 = /^[abc]/;
        var str2 = /^[abc]$/;
        console.log(str2.test('andy'));  //true t f
        console.log(str2.test('simon')); //false f f
        console.log(str2.test('fengzia')); //true f f

3.3.2量词符 **

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

3.3.4 括号总结

1.大括号 量词符 里面表示重复次数

2.中括号 字符集合 匹配方括号中的任意字符

3.小括号表示优先级

正则表达式在线测试

3.4预定义类 ( 转义字符)

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