2017.08.22

new

  • 正则表达式

  • 创建正则表达式的两种方式:字面量形式、 RegExp 构造函数

var expression = /pattern/flags;  // 类 Perl 的语法
var expression = new RegExp("[a-z]", "gm");

注意ES3 中,字面量形式创建的实例,其属性是不可重置的。所以,对其再次声明并使用其实是原实例,并从上次搜索位置继续匹配。 ES5 开始用法跟构造函数方式完全相同(兼容性:IE9+)。

  1. 匹配模式 —— flags

g : global、 i : case-insensitive、 m : mulitline、

var foo = 'test \n carl';
var bar = 'carl \n carl';
var re_f_ = /carl/;
var re_f_m = /carl/m;
var re_f_mg = /carl/mg;
foo.replace(re_f_, '0');   // 'test \n carl';
foo.replace(re_f_m, '0');  // 'test \n 0'
bar.replace(re_f_m, '0');  // '0 \n carl'
bar.replace(re_f_mg, '0'); // '0 \n 0'
  1. 元字符 : 在正则表达式中有着特殊用途的14个字符( .*?\|$+^()[]{} )。如果需要匹配这些字符,必需进行转义。
var str = '\\.html';  // '\.html' : string 中, '.' 号是正常字符
var re = '\\\.html';  // '\.html'
str.replace(re, 'e'); // 'e'

var re = /{html/;     // 此处 '{' 被当成普通字符匹配,但如果写 '{4,}' 则表示特俗用途:最少四个量

注意当使用 RegExp 构造函数时,传入的模式参数为字符串,所以某些情况下需要对字符串进行双重转义。

var re = new RegExp('\\\\xml', 'ig');
var str = '\\xml';
re.test(str);   // true
  1. 实例属性: global、ignoreCase、lastIndex、multiline、source

  2. 实例方法

  3. exec(str) => [str, ?(group)+, (index, input)] || null

var str = 'Welcome to China!';
var re = /(\s)\bto\b\s/img;
var result = re.exec(str); // [ ' to ', ' ', index: 7, input: 'Welcome to China!' ]
result.index  === 7;
result.input  === str;
result[0]     === ' to ';
result[1]     === ' ';
// 注意
// exec() 方法,即使设置了全局标志,每次也只会返回一个匹配项。但每次调用都会从 实例属性的 lastIndex 位置开始
// 如果不设置全局标志,则始终都返回第一个匹配项
// 注意 IE 中,实现实例属性 lastIndex 存在偏差,即使在非全局模式下属性值也会发生变化
  • test(str) => boolean, toLocaleString(), toString(), valueOf()
var str = 'test  test ';
var re = /test/g;
re.test(str) === true;
re.toLocaleString(); // '/test/g'
re.toString()  // '/test/g
re.valueOf()  // /test/g === re
  1. 构造函数属性(相当于静态属性):随着最近一次的模式匹配结果而变化
var str = 'Welcome to China!';
var re = /(\s)\bto\b\s/img;
if (re.test(str)) {
    // 长属性名
    RegExp.input === 'Welcome to China';
    RegExp.leftContext === 'Welcome';
    RegExp.rightContext === 'China';
    RegExp.lastMatch === ' to ';
    RegExp.lastParen === ' ';
    // 短属性名
    RegExp.input === RegExp['$_'];
    RegExp.leftContext === RegExp['$`'];
    RegExp.rightContext === RegExp['$\''];
    RegExp.lastMatch === RegExp['$&'];
    RegExp.lastParen === RegExp['$+'];
    RegExp["$+"]; // "editSlide
    // 捕获组属性
    RegExp.$1 === ' '

    // RegExp.multiline === false;  // 2017.08.22 chrome版本 60.0.3112.101 => undefined

}

results matching ""

    No results matching ""