JavaScript中正则表达式的使用

2017-05-01  本文已影响0人  flykyle

Quick reference

regex.jpg

创建正则对象

两种创建方法:

  1. 使用RegExp 构造函数

    var re1 = new RegExp("abc");
    var re2 = new RegExp("abc",'i'); //大小写不敏感
    

    第二个参数为修饰符,可以指定匹配是否为全局匹配,是否为大小写敏感等。

  2. 直接将表达式包括在正斜杠里面

var re2 = /abc/i;
var re3 = /[\d.+]/;
> 特殊字符当做普通字符用,比如问号和加号,需用 \ 转义;
> 方括号里面的特殊字符如 `.` 和 `+` 没有特殊含义,当作普通字符用。

实际应用中,基本上都采用第二种的写法,更加便捷。

正则对象的属性

与表达式相关的属性:

/foo/ig.flags;   // "gi"
/bar/myu.flags;  // "muy"
/foo/ig.global;  // true
/foo/ig.ignoreCase;  // true
/bar/myu.multiline;  // true
/bar/myu.source;     //"bar"

lastIndex属性:

返回下一次开始搜索的位置。该属性可读写,但是只在设置了g修饰符时有意义。

正则对象的方法

test()

返回一个布尔值,没有匹配项,返回false;有匹配项,返回true。

console.log(/abc/.test("abcde")); //true
console.log(/[0-9]/.test("in 1992"));//true
console.log(/'\d*'/.test("'123'")); //true
console.log(/neighbou?r/.test("neighbor")); //ture
console.log(/\bcat\b/.test("concatenate")); //false

使用全局匹配的时候,即表达式里面使用了g作为修饰符,每次使用test,下一次的开始匹配位置是上一次匹配成功的位置。

var digit = /\d/g;
var str = "x_1_x_0";
digit.test(str);    // true
digit.lastIndex;    // 3
digit.test(str);    // true
digit.lastIndex;    // 7
digit.test(str);    // false
digit.lastIndex;    // 0

使用lastIndex可以控制匹配的开始位置。

var pattern = /y/g;     //必须全局匹配
pattern.lastIndex = 3;  //指定匹配开始的位置
console.log(pattern.test("zzy")); //false

exec()

返回匹配的结果。没有匹配项,返回null;有匹配项,返回一个数组。

var match = /\d+/.exec("one two 100"); 
console.log(match);         // [ '100', index: 8, input: 'one two 100' ]
console.log(match.index);   // 8

如果表达式中有圆括号,即一个group,与group匹配的内容也能返回:

console.log(/_(x)/.exec("_y_x")); 
// [ '_x', 'x', index: 2, input: '_y_x' ]
console.log(/bad(ly)?/.exec("bad")); 
// [ 'bad', undefined, index: 0, input: 'bad' ] 没有匹配到的group返回undefined
console.log(/(\d)+/.exec("123"));    
//[ '123', '3', index: 0, input: '123' ] 匹配到多次,返回最后一次的

数组里面有两个属性:

  1. input:整个原字符串。
  2. index:整个模式匹配成功的开始位置(从0开始计数)。

使用全局匹配的时候,下一次的开始匹配位置是上一次匹配成功的位置。可以用这个特点进行遍历,找出所有的匹配项。

var input = "A string with 3 numbers in it... 42 and 88.";
var number = /\b(\d+)\b/g;
var match;
while (match = number.exec(input))
    console.log("Found", match[1], "at", match.index);
// Found 3 at 14
// Found 42 at 33
// Found 88 at 40

字符串对象中使用正则表达式

有四种方法可以使用正则表达式:

replace():按照给定的表达式替换字符串,返回替换后的字符串。

match():返回一个数组,成员是所有匹配的子字符串。

search():按照给定的表达式搜索字符串,返回一个整数,表示匹配到的位置。

split():按照给定的表达式分割字符串,返回一个数组,包含分割后的各个成员。

replace()

该方法的第一个参数是表达式,第二个参数是要替换的内容。

console.log("papa".replace("p", "m")); //mapa 第一个匹配上的被替换
console.log("Borobudur".replace(/[ou]/, "a")); // Barobudur
console.log("Borobudur".replace(/[ou]/g, "a")); //Barabadar

replace真正的厉害之处在于,它的第二个参数可以使用$指代匹配到的内容:

  • $& 指代匹配到的字符串。
  • $` 指代匹配结果前面的文本。
  • $' 指代匹配结果后面的文本。
  • $n 指代匹配成功的第n组内容,n是从1开始的自然数。
  • $$ 指代美元符号$
console.log("Hopper Grace".replace(/(\w+)\s(\w+)/g, "$&-->$2 $1")); 
//Hopper Grace-->Grace Hopper
console.log('abc'.replace('b', '[$`-$&-$\']'));
// "a[a-b-c]c"

replace的第二个参数也可以是function

var s = "the cia and fbi";
console.log(s.replace(/\b(fbi|cia)\b/g, function(str) {
  return str.toUpperCase();
}));    //the CIA and FBI

match

exec()方法类似,匹配成功返回一个数组,失败返回null

全局匹配的时候,一次性返回所有匹配的项。

console.log("one two 100".match(/\d+/));//["100"]
console.log("Banana".match(/an/g));     //["an", "an"]

search()

返回第一个匹配项的位置,没有任何匹配的项,返回-1。

console.log(" word".search(/\S/));  //2
console.log(" ".search(/\S/));      //-1

split()

使用字符分割

var temp = 'Oh brave new world that has such people in it.';
temp.split(' ');
// ['Oh', 'brave', 'new', 'world', 'that', 'has', 'such', 'people', 'in', 'it.']

使用正则表达式分割

// 使用分号分割,并将其前后的空格去除
var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';

var re = /\s*;\s*/;
var nameList = names.split(re);

console.log(nameList);
// [ 'Harry Trump','Fred Barney','Helen Rigby','Bill Abel','Chris Hand '];
// 试试看,如果正则表达式为 /(\s*;\s*)/ ,会返回什么呢?

使用正则表达式分割,并返回匹配到的内容

var myString = 'Hello 1 word. Sentence number 2.';
var splits = myString.split(/(\d)/);

console.log(splits);
//[ "Hello ", "1", " word. Sentence number ", "2", "." ]

返回指定长度的数组

var myString = 'Hello World. How are you doing?';
var splits = myString.split(' ', 3);

console.log(splits);
// ["Hello", "World.", "How"]

可以用它实现字符串的反转

var str = 'asdfghjkl';
var strReverse = str.split('').reverse().join(''); 
// 'lkjhgfdsa'
// 可以用来测试字符串是否为回文

RegExp对象

var name = "harry";
var text = "Harry is a suspicious character."; 
    //在名字下面加下划线
var regexp = new RegExp("\\b(" + name + ")\\b", "gi"); 
console.log(text.replace(regexp, "_$1_"));  
    // _Harry_ is a suspicious character.

匹配机制

var animalCount = /\b\d+ (pig|cow|chicken)s?\b/;
console.log(animalCount.test("15 pigs"));       // true
console.log(animalCount.test("15 pigchickens"));// false
Paste_Image.png
var number = /\b([01]+b|\d+|[\da-f]+h)\b/;
//十进制/二进制/十六进制数
Paste_Image.png

贪婪匹配

先看一个例子,它的作用是将JavaScript代码中的注释去掉:

function stripComments(code){
    return code.replace(/\/\/.*|\/\*[^]*\*\//g, "");
}
console.log(stripComments("1 + /* 2 */3"));   // 1 + 3
console.log(stripComments("X = 10;// ten!")); // X = 10;
console.log(stripComments("1 /* a */+/* b */ 1")); // 1 1 有问题

//.*表示单行注释,/*[^]*\*/表示多行注释。其中/和最后一个*做普通字符用,所以用\来转义。
第一个表达式用 . 表示任意字符;第二个用 [^] 表示任意字符,因为多行注释会有换行。

最后一个有问题是贪婪匹配,即尽可能地匹配多个字符。在它后面加上问号,它就尽可能少地匹配,即 [^]*? 。同样也适用于+,?,{}。

function stripComments(code) {
    return code.replace(/\/\/.*|\/\*[^]*?\*\//g, "");
}
console.log(stripComments("1 /* a */+/* b */ 1")); //1 + 1

在线工具

正则表达式在线测试:https://www.debuggex.com

参考:

Eloquent JavaScript Chapter9
阮一峰 RegExp对象
Mozilla Developer Network

上一篇下一篇

猜你喜欢

热点阅读