《ES6标准入门(第3版)》学习笔记13:chapter_5 正则的扩展(一)

这是该系列的第13篇学习笔记!
1,RegExp构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RegExp构造函数</title>
</head>
<body>
    
    <script>
    // ES5中,RegExp构造函数的参数有2种情况:
    // case 1: 参数是字符串,这是第二个参数是正则表达式的修饰符(flag)
    // var regex = new RegExp('xyz', 'i');
    // 等价于
    // var regex = /xyz/i;

    // case 2: 参数是正则表达式,这时会返回一个原有正则表达式的拷贝
    // var regex = new RegExp(/xyz/i);
    // 等价于
    // var regex = /xyz/i;
    // 这种情况下,ES5不允许使用第二个参数添加修饰符,否则会报错
    // ES6改变了这种行为 --> 如果RegExp构造函数的第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符
    //                      而且返回的正则表达式会忽略原有正则表达式额修饰符,只使用新的修饰符

    var newRegexp = new RegExp(/abc/ig, 'i').flags;
    console.log(newRegexp);  // i
    // 上面代码中,正则对象的修饰符是ig,他会被第二个参数i覆盖


    
    </script>
</body>
</html>

2,字符串的正则方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串的正则方法</title>
</head>
<body>
    
    <script>
    // ES6使这4个方法在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法都定义在RegExp对象上
    // 字符串的正则方法(4个):
    // String.prototype.match  --> 调用RegExp.prototype[Symbol.match]
    // String.prototype.replace --> 调用RegExp.prototype[Symbol.replace]
    // String.prototype.search --> 调用RegExp.prototype[Symbol.search]
    // string.prototype.split --> 调用RegExp.prototype[Symbol.split]
    console.log(String.prototype);
    console.log(RegExp.prototype); 
    
    </script>
</body>
</html>

3,u修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>u修饰符</title>
</head>

<body>

    <script>
        // ES6添加了u修饰符 --> “Unicode模式”,表示可以正确处理4个字节的UTF-16编码
        // console.log(/^\uD83D/u.test('\uD83D\uDC2A'));  // false --> \uD83D\uDC2A是一个4字节的UTF-16编码
        // console.log(/^\uD83D/.test('\uD83D\uDC2A'));  // true


        // 一旦加上了u修饰符,以下的正则表达式行为会发生改变:
        // (1) 点字符 --> 除换行符以外的任意单个字符,对于码点大于0xFFFF的Unicode字符,点字符不能识别,必须加上“u修饰符”
        var s = '?';
        // console.log(/^.$/.test(s));  // false
        // console.log(/^.$/u.test(s));  // true

        // (2) Unicode字符表示法
        // ES6新增使用大括号表示Unicode字符的表示法,这种表示法在正则表达式中必须加上u修饰符才能识别当中的大括号,否则会被解读为量词
        // console.log(/\u{61}/.test('a'));  // false
        // console.log(/\u{61}/u.test('a'));  // true
        // console.log(/\u{20BB7}/u.test('?'));  // true
        // 如果不加u修饰符,正则表达式无法识别"\u{61}"


        // (3) 量词 
        // 加u修饰符后,所有量词都会正确识别码点大于0xFFFF的Unicode字符
        // console.log(/a{2}/.test('aa'));  // true
        // console.log(/a{2}/u.test('aa'));  // true
        // console.log(/?{2}/.test('??'));  // false
        // console.log(/?{2}/u.test('??'));  // true


        // (4) 预定义模式 --> "\S",匹配所有不是空格的字符
        // 加u修饰符后,会正确识别码点大于0xFFFF的Unicode字符
        console.log(/^\S$/.test('?')); // false
        console.log(/^\S$/u.test('?')); // true

        // 正确放回字符串长度的函数
        function codePointLength(text) {
            var result = text.match(/[\s\S]/gu) ;
                    return result ? result.length : 0;
        }
        var s = '??';
        console.log(s.length);  // 4
        console.log(codePointLength(s));  // 2



        // (5) i修饰符
        // 有些Unicode字符的编码不同,但是字型相近,比如,\u004B and \u212A都是大写的K

        console.log(/[a-z]/i.test('\u212A'));  // false
        console.log(/[a-z]/iu.test('\u212A'));  // true
        // 如果不加u修饰符,就无法识别非规范的K字符




    </script>
</body>

</html>

让学习“上瘾”,成为更好的自己!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值