JS-RegExp 正则表达式

最新推荐文章于 2024-10-30 15:39:27 发布

wkxjhngw

最新推荐文章于 2024-10-30 15:39:27 发布

阅读量230

点赞数

分类专栏： JS学习笔记文章标签：正则表达式 javascript

本文链接：https://blog.csdn.net/weixin_50945128/article/details/120072629

版权

JS学习笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

课前补充

转义字符 ‘’

把 \ 后面的字符转成正常文本

console.log('abc\"def');

\r ：行结束
\n ：换行
\t ：制表符

多行字符串

字符串不能换行写

    var test = '\
    <div></div>\
    <span></span>\
    ';

把文本形式的回车转义掉，多行字符串可以实现

字符串换行符 \n

RegExp 正则表达式

什么是正则表达式？

正则表达式是构成搜索模式（search pattern）的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

正则表达式的作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择。

创建方式

字面量

var reg = /abc/; 正则表达式abc ：有一个匹配字符串的规则叫abc
匹配规则：包含abc字符片段（必须是abc，不能大小写，不能分隔开

    var reg = /abc/;
    var str = 'abcd';
    reg.test(str);      // 测验字符串str是否含有规定片段（abc字符片段）
    // true

i ：ignoreCase 忽视大小写
g : global 全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m : 多行匹配

new RegExp();

    // var reg = new RegExp('规则','属性');

    var reg = new RegExp('abc','i');
    var str = 'abcd';
    reg.test(str);  

    var reg1 = /abc/;
    var reg = new RegExp(reg1);
    // 样子一样但是彼此独立
    var reg = RegExp(reg1);
    // 本质同一个正则表达式，只不过是不同引用，两个钥匙指向同一个房间

修饰符 / 属性

    // i ：ignoreCase  忽视大小写
    var reg1 = /abc/;
    var reg2 = /abc/i;
    var str1 = 'aBcde';
    console.log(reg1.test(str1));    // false
    console.log(reg2.test(str1));    // true

    // g : global  全局匹配（查找所有匹配而非在找到第一个匹配后停止）
    var reg11 = /ab/;
    var reg22 = /ab/g;
    var str2 = 'ababababab';
    console.log(str2.match(reg11));  // ["ab"]
    console.log(str2.match(reg22));  // ["ab", "ab", "ab", "ab", "ab"]
    
    // m : 多行匹配
    var reg111 = /^a/g;   // ^a ：开头的a
    var reg222 = /^a/gm;
    var str3 = 'abcd\na';    //多行字符串，不是写起来多行
    console.log(str3.match(reg111));   // ["a"]
    console.log(str3.match(reg222));   // ["a", "a"]

方括号

方括号用于查找某个范围内的字符:

表达式          描述
[abc]   查找方括号之间的 任何字符。
[^abc]  查找任何 不在 方括号之间的字符。
[0-9]   查找任何从 0至9 的数字。
[a-z]   查找任何从 小写a到小写z 的字符。
[A-Z]   查找任何从 大写A到大写Z 的字符。
[A-z]   查找任何从 大写A到小写z 的字符。
[adgk]  查找给定集合 内 的任何字符。
[^adgk] 查找给定集合 外 的任何字符。
(red|blue|green)    查找任何指定的选项。

    const reg = /[1234567890][1234567890][1234567890]/g;    // 一个方括号代表一位，里面是区间，该表达式为取三个数字连在一起的片段
    const str = '12334fgsfj5465hgjf';      // 三位一看，不会翻过去 例如1234ui 其中符合匹配规则的有：123
    console.log(str.match(reg));   // ["123", "546"]
    
    const reg2 = /[ab][cd][d]/g;    
    const str2 = 'abcd';      
    console.log(str2.match(reg2));  // ["bcd"]
    
    const reg3 = /(abc|bcd)[0-9]/g;    
    const str3 = 'bcd8';      
    console.log(str3.match(reg3));   // ["bcd8"]

元字符

元字符(Metacharacter）是拥有特殊含义的字符:

元字符描述
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数xxx规定的字符。
\xdd 查找以十六进制数dd规定的字符。
\uxxxx 查找以十六进制数xxxx规定的 Unicode字符。

\w === [0-9A-z_] : 取0-9，A-z，_ 区间的数
\W === [^\w] : 非\w

\d === [0-9]
\D === [^\d]

\s : 空白字符【空格符、制表符、回车符、换行符、垂直换行符、换页符】
\s === [ \t\r\n\v\f] 在正则表达式里写空格就表示匹配一个空格
\S === [^\s]

\b === 单词边界
\B === 非单词边界

    const reg = /\bcde\b/g;
    const str = 'abc cde efg';
    console.log(str.match(reg));   // null

    const reg = /\bcde\B/g;
    const str = 'abc cdeefg';
    console.log(str.match(reg));   // ["cde"]

\t : 不是视觉上的\t，而是真是的文本\t

Unicode字符：十六进制，最多16层，不同层包含信息不同，可以表示汉字

\u010000 - \u01ffff 第一层
\u020000 - \u02ffff 第二层
…
\u100000 - \u10ffff 第十六层

第一层可以省去01，直接写为 \u0000 - \uffff
其他层要写层数

    const reg = /\u65e9\u4e0a\u597d/g;  
    // reg = /[\u0000-\ua000]/g;
    const str = '早上好';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["早上好"]

能匹配所有[\s\S]集合并上补集

. === [^\r\n]

量词

量词：表示数量的词，几个，一把

量词               描述
n+      匹配任何包含 至少一个 n 的字符串。
n*      匹配任何包含 零个或多个 n 的字符串。
n?      匹配任何包含 零个或一个 n 的字符串。
n{X}    匹配包含 X个n 的序列的字符串。
n{X,Y}  匹配包含 X至Y个n 的序列的字符串。
n{X, }  匹配包含至少 X个n 的序列的字符串。
n$      匹配任何 结尾为n 的字符串。
^n      匹配任何 开头为n 的字符串。
?=n     匹配任何 其后紧接指定字符串n 的字符串。
?!n     匹配任何 其后没有紧接指定字符串n 的字符串。

n+ n出现了{1. }次 1 - infinity 贪婪
n* n出现了{0, }次 0 - infinity 贪婪
n? n出现了{0,1}次 0 - 1

    const reg = /\w+/g;
    const str = 'abcds';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["abcds"]

    const reg = /\w*/g;
    const str = 'abcd';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["abcd", ""]
    // 第一次匹配 * = 3， 第二次匹配 * = 0

    const reg = /\d*/g;   // 数字
    const str = 'abcd';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["", "", "", ""]
    // 第一次匹配 * = 0，第二次匹配 * = 0，第三次匹配 * = 0，第四次匹配 * = 0  
    
    const reg = /\w?/g;
    const str = 'aaa';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["a", "a", "a", ""]

n{X} X个n
n{X,Y} X到Y个n 贪婪
n{X, } 至少X个n 贪婪

    const reg = /\w{3}/g;
    const str = 'aaaaaaaaaaaaaa';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["aaa", "aaa", "aaa", "aaa"]

    const reg = /\w{3,5}/g;
    const str = 'avbsdsghg';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["avbsd", "sghg"]

    const reg = /\w{3,}/g;
    const str = 'avbsdsghg';
    reg.test(str);      // true
    console.log(str.match(reg));    // ["avbsdsghg"]

是几个\w，不是取一个\w 再乘量词，不能保证都相同例：["avbsd", "sghg"]

n$ 匹配任何结尾为n 的字符串。
^n 匹配任何开头为n 的字符串。

    const reg1 = /^abc/g;
    const reg2 = /fg$/g;
    const str = 'abcdefg';
    console.log(str.match(reg1));    // ["abc"]
    console.log(str.match(reg2));    // ["fg"]

正向预查正向断言

    const str = 'abaaaa';
    const reg = /a(?=b)/g;  // a后面跟着b，但是b不参与选择
    const reg1 = /a(?!b)/g; 
    console.log(str.match(reg));    // ["a"]
    console.log(str.match(reg1));   // ["a", "a", "a", "a"]

RegExp 对象属性

属性描述
global RegExp 对象是否具有标志g。
ignoreCase RegExp对象是否具有标志i。
multiline RegExp对象是否具有标志m。
source 正则表达式的源文本。字符串展示
lastIndex 一个整数，标示开始下一次匹配的字符位置。(光标位置，可以修改)

RegExp 对象方法

方法描述
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回true或false。

    const reg = /ab/g;
    const str = 'abababab';

    console.log(reg.lastIndex);    // 0
    console.log(reg.exec(str));    
    // ["ab", index: 0, input: "abababab", groups: undefined]
    // 类数组，index 匹配到片段时光标的位置

    const str = 'aaaabbbc';
    const reg = /(\w)\1\1/g;
    // (\w) : 子表达式
    // \1 : 反向引用第一个子表达式的内容
    // (\w)\1 : 第一个子表达式匹配到的值copy一下，例如第一个子表达式匹配到a，则正则表达式为aa
    console.log(str.match(reg));    // ["aaa", "bbb"]

    // ((\w)\1(\w)\2) : \1 --> 最外面的括号，，\2 --> 里面第一个括号 


    const str = 'aabb';
    const reg = /(\w)\1(\w)\2/g;
    console.log(str.match(reg));    // ["aabb"]
    console.log(reg.exec(str));     // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]

支持正则表达式的String对象的方法

方法描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

// str.match();
    const str = 'aabb';
    const reg = /(\w)\1(\w)\2/;
    const reg2 = /(\w)\1(\w)\2/g;
    console.log(str.match(reg));    // ["aabb", "a", "b", index: 0, input: "aabb", groups: undefined]
    console.log(str.match(reg2));   // ["aabb"]
    
// str.search();
    const str = 'cdfaabb';
    const reg = /(\w)\1(\w)\2/;
    console.log(str.search(reg));   // 3

    const str = 'cdfa';
    const reg = /(\w)\1(\w)\2/;
    console.log(str.search(reg));   // -1

// str.split()
    const str = 'cdfsaf4dsgfds5bvj8dfgdha';
    const reg = /(\d)/g;
    console.log(str.split(reg));    // ["cdfsaf", "4", "dsgfds", "5", "bvj", "8", "dfgdha"]
    const reg1 = /\d/g;
    console.log(str.split(reg1));    // ["cdfsaf", "dsgfds", "bvj", "dfgdha"]
    
// str.replace()
    const str = 'aa';
    console.log(str.replace('a','b'));  // ba
    // 没有访问全局的能力，只能访问一个 
    const reg = /a/g;
    console.log(str.replace(reg,'b'));  // bb

    const reg = /(\w)\1(\w)\2/g;
    const str = 'aabb';
    // console.log(str.replace(reg, '$2$2$1$1'));  // bbaa
    // $ : 表示子表达式，$1: 子表达式1

    console.log(str.replace(reg, function($, $1, $2) {      // 正则表达式匹配的结果，第一个子表达式内容，第二个子表达式内容
        return $1 + $2 + $2 + $ + '123ab';  // 字符串形式
    }));

str.toUpperCase() : 变大写
str.toLowerCase() : 变小写

在表达式后加？，满足条件，能少绝不多 ( 非贪心匹配 )

    const reg = /a+?/g;
    // const reg = /a{1,3}?/g;    // ["aa", "aa", "aa"]
    // const reg = /a+?/g;        // ["", "", "", "", "", "", "", ""]
    const str = 'aaaaaaa';
    console.log(str.match(reg));    // ["a", "a", "a", "a", "a", "a", "a"]

$ 有特殊含义，如果想要用$字符，需要写两个 $$（相当于转义字符
\\
\?
\*

JS高程三

1.渲染模式
在多年以前（IE6诞生以前)，各浏览器都处于各自比较封闭的发展中（基本没有兼容性可谈)。随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准)工作的浏览器，比如IE6就是其中之一。但是考虑到以前建设的网站并不支持标准模式，所以各浏览器在加入标准模式的同时也保留了混杂模式（即以前那种未按照统一标准工作的模式，也叫怪异模式)。

三种标准模式的写法

1.<!DOCTYPE html>
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <script>
        // var test = '\
        // <div></div>\
        // <span></span>\
        // ';
        // console.log(test);

        // var reg = /abc/;
        // var str = 'abcd';
        // console.log(reg.test(str));


        // i ：ignoreCase  忽视大小写
        var reg1 = /abc/;
        var reg2 = /abc/i;
        var str1 = 'aBcde';
        console.log(reg1.test(str1));    // false
        console.log(reg2.test(str1));    // true

        // g : global  全局匹配（查找所有匹配而非在找到第一个匹配后停止）
        var reg11 = /ab/;
        var reg22 = /ab/g;
        var str2 = 'ababababab';
        console.log(str2.match(reg11));  // ["ab"]
        console.log(str2.match(reg22));  // ["ab", "ab", "ab", "ab", "ab"]
        
        // m : 多行匹配
        var reg111 = /^a/g;   // ^a ：开头的a
        var reg222 = /^a/gm;
        var str3 = 'abcd\na';    //多行字符串，不是写起来多行
        console.log(str3.match(reg111));   // ["a"]
        console.log(str3.match(reg222));   // ["a", "a"]


    </script>



    <script>
//         表达式          描述
// [abc]   查找方括号之间的 任何字符。
// [^abc]  查找任何 不在 方括号之间的字符。 [^a] : 非a
// [0-9]   查找任何从 0至9 的数字。
// [a-z]   查找任何从 小写a到小写z 的字符。
// [A-Z]   查找任何从 大写A到大写Z 的字符。
// [A-z]   查找任何从 大写A到小写z 的字符。
// [adgk]  查找给定集合 内 的任何字符。
// [^adgk] 查找给定集合 外 的任何字符。
// (red|blue|green)    查找任何指定的选项。|：或

        const reg = /[1234567890][1234567890][1234567890]/g;    // 一个方括号代表一位，里面是区间，该表达式为取三个数字连在一起的片段
        const str = '12334fgsfj5465hgjf';      // 三位一看，不会翻过去 例如1234ui 其中符合匹配规则的有：123
        console.log(str.match(reg));   // ["123", "546"]
        
        const reg2 = /[ab][cd][d]/g;    
        const str2 = 'abcd';      
        console.log(str2.match(reg2));  // ["bcd"]
        
        const reg3 = /(abc|bcd)[0-9]/g;    
        const str3 = 'bcd8';      
        console.log(str3.match(reg3));   // ["bcd8"]

        



 
    </script>