正则表达式

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

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

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

修饰模式 —— 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'

元字符

在正则表达式中有着特殊用途的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

实例属性

global、ignoreCase、lastIndex、multiline、source

var re = /test/g;
re.global // true
re.ignoreCase // false
re.lastIndex // 0
re.mulitline // false
re.source // 'test'

实例方法

  • exec(str) => [result, ?(group)+, (index:pos, input:str)] || 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
  • compile(pattern) : 编译正则表达式为内部格式
var re = /test/g;
re.valueOf();  // /test/g
re.compile('[a-z]+');
re.valueOf(); // /[a-z]+/

构造函数属性(相当于静态属性)

随着最近一次的模式匹配结果而变化

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
}
var re = /(\d{3}).*(\d{3})/;
var str = 'abc123abcdef1234';
var str.replace(re, '$2'); // 'abc234'

2017.08.26

  • 连字符命名转换小驼峰(camelize)
let camelize = function(str) {
    return str.replace(/-+(.)?/g, (match, chr) => {
        return chr ? chr.toUpperCase() : ''
    });
};

results matching ""

    No results matching ""