• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

关于如何学习理解JavaScript正则表达式

JavaScript web前端中文站 2年前 (2018-04-01) 665次浏览 已收录 1个评论

我爱正则表达式。我发现几乎没有一天我不在使用它们解决一些问题。虽然我爱他们,但是,在使用中一直感觉到有点吃力。我认为这只是因为我没有对它有一个全面的深入了解。因此,我想我会花几分钟给自己(和有兴趣的其他人)一个简短的介绍。

String 的 replace 方法(字符替换)

在 JavaScript 中,每一个字符串对象有一个 replace()方法。这 replace()方法可心使用一个正则表达式对象作为第一个参数,可以是一个静态的字符串或一个函数作为第二个参数。当调用 replace()方法时,传入一个字符串,原字符串中所有与正则匹配的字符都会被替换成这个字符串:

// -- String.replace() -------------------------------------- //

// Create a test string.
var value = "Hey Tricia, how's it going?";

// The replace() method can take a static replacement string as
// the second argument. Replace the name Tricia with the name
// Joanna.
var newValue = value.replace(
    new RegExp( "\\bTricia\\b", "gi" ),
    "Joanna"
);

// Output the new string.
document.write( newValue );

这里,我们找到所有的”Tricia”并替换成”Joanna”。

当我们运行上面的代码,我们可以得到这样的结果:

Hey?Joanna,?how's?it?going?

这里传入的是一个静态的字符串,但它可以具有一些动态的特性。通过匹配模式的捕获组功能,替换字符串可以由多部分的匹配共同组成。在正则表达式模式下,每个捕获组可以在替换字符串中使用$N 来标记,在这里 N 是捕获组在正则表达示中的索引位置。

// -- String.replace() -------------------------------------- //
 
// Create a test string.
var value = "Hey Tricia, how's it going?";
 
// The replace() method can take a static replacement string as
// the second argument. This static string can contain references
// to captured groups in the pattern. Replace the name Tricia
// with the name hottest Tricia.
var newValue = value.replace(
new RegExp( "\\b(Tricia)\\b", "gi" ),
"hottest $1"
);
 
// Output the new string.
document.write( newValue );

在这个示例中,我们用”hottest $1″来替换”Tricia”。由于$1 指向第一个捕获组匹配的值,运行这段代码,我们可以得到这样的结果:

Hey hottest Tricia, how's it going?

在这里你可以看到”hottest $1″ 被替换成了”hottest Tricia”.

String 的 replace 方法(函数替换)

通过传入上例中的字符串是一种很方便也节省时间的方法,但如果我们想要更多的干预替换的行为,我们可以传入一个方法体来实现。这是一个我个人很喜欢同时也经常 使用的小技巧。每次匹配规则作用于源字符串时都会执行一次这个方法.源字符中被匹配的字符及每个捕获组都会作为特有的参数传入方法内。源字符中与正则匹配的部分会被这个方法的 return 值替换。

// -- String.replace() -------------------------------------- //
 
// Create a test string.
var value = "Hey Tricia, how's it going?";
 
// The replace() method can take a method as the second argument.
// In this case, the return value of the method is what is
// replaced into the string. The first argument passed to this
// method is the matched pattern; each subsequent argument is a
// captured group from the pattern.
var newValue = value.replace(
new RegExp( "\\b(\\w+)'(s)\\b", "gi" ),
 
// This method will handle the replacement. In this case,
// the $1 is the \\w+ and the $2 is the s.
function( $0, $1, $2){
// Replace in "is".
return( $1 + " is" );
}
);
 
// Output the new string.
document.write( newValue );

通过上例你可以看到所有减写的 is 都会被替换成标准写法,我们可以得到如下结果:

Hey Tricia, how is it going?

String 的 match 方法(非全局匹配)

JavaScript 中,我们还可以使用 match 方法来收集被匹配的值.match 方法可以生成并返回一个源字符中所有与正则匹配的值的数组(译者注:如果可以找到匹配)。

值得一说的是,在 match 方法里使用全局匹配标签 g 与否会产生不行的行为效果。

当我们未传入全局匹配的 g 标签时,match 方法会返回一个包含一个该正则完整匹配的字符及其后仍次的子分组匹配字符的数组

// -- String.match() ---------------------------------------- //
 
// Create a test string.
var value = "aabbccddee";
 
// Get the matches in the string. When this is run WITHOUT the
// global flag, it returns the entire match, and then each
// captured group as a subsequent match index.
var matches = value.match(
new RegExp(
"/(\w)(\1)+/i",
"i"
)
);
 
// Output the array of matches.
console.log( matches );

上例的目地是为了找到一个或多个有重复字母的字符串。在这里并没有使用全局匹配 g,该正则的语法解释是 \w 匹配字母,\1 匹配第一个子分组,既(\w)。

我们可以得到这样的结果。

aabbccddee,a,a

(译者注,该文原先的正则使用了不分配分组,并且和下文的全局匹配无法统一,为了便于理解,译者把该正则写法统一了,以便下文中对全局匹配区分)

在这里,aabbccddee 即是上文提到的”该正则完整匹配的字符”,而”a”,”a”则是”其后仍次的子分组匹配字符”

注意:?当正则表达式没有发现匹配,?match 会返回?null?,而不是空数组.

String 的 match 方法(全局匹配)

当我们传入全局匹配的 g 标签时,match 方法会返回包含所有该正则匹配的字符串的数组而不会包含任何子分组的匹配

// -- String.match() ---------------------------------------- //
 
// Create a test string.
var value = "aabbccddee";
 
// Get the matches in the string. When this is run WITH the
// global flag, it returns a single pattern match in each of the
// array indexes (regardless of capturing).
var matches = value.match(/(\w)(\1)+/ig);
 
// Output the array of matches.
console.log( matches );

当我们执行上述代码,我们可以得到:

aa,bb,cc,dd,ee

各位可以看到,每个(\w)(\1)+所匹配的字符串都会作为 match 方法返回的数组中的一个元素,这里不会再包含任何对子分组的匹配。

String 的 search 方法

字符串 search()方法和 indexof()方法很类似,但使用正则表达式

这个方法只需要传入一个正则表达式,执行后返回第一个匹配的索引,或-1(如果没有发现匹配)

// -- String.search() --------------------------------------- //
 
// Create a test string.
var value = "Kate, you are looking very hot!";
 
// Search for a value in the string. Returns index or -1.
console.log(value.search( new RegExp( "are", "i" ) ) +"<br />");

// Search for a value NOT in the string. Returns index or -1.
console.log(value.search( new RegExp( "fun", "i" ) ) +"<br />");

在上例中我们准备了一个能够匹配源字符串的正则及一个无法匹配的正则,运行这段代码,我们可以得到

10
-1

可以发现,are 在源字符串的索引 10 位置,而 fun 无法被匹配上,返回-1

RegExp 的 test 方法

正则表达式 test()方法只会根据给定的源字符串是否能匹配正则表达式而返回 true 或 false:

// -- RegExp.test() ----------------------------------------- //
 
// Create a test string.
var value = "Kate, you are looking very hot!";
 
// Create a testing pattern.
var pattern = new RegExp( "\\bhot\\b", "i" );
 
// Test to see if the given string matches the given expression.
// Return TRUE or FALSE.
console.log(pattern.test( value ));

当我们执行上面的代码,可以得到:

true

可以看出,该正则能够匹配给定的源字符串。有一点需要重点提示:test 方法并不需要该正则完整的匹配源字符串才行。如果你需要正则能完整的匹配源字符串才返回 true,那需要在正则的前后加上^和$标记.

RegExp 的 exec 方法

exec 方法允许我们收集收集被匹配的值;但是,和 String 的 match 方法不同的是 exec 方法允许我们更深入每一次正则匹配的过程。exec 方法可以让我们遍历每一次正则匹配的子字符串。在每一次匹配的回调事件中,我们不但可以到得被匹配的字符串的值及其索引,还可以得到每个子分组的匹配结果。

// -- RegExp.exec() ----------------------------------------- //
 
// Create a test string.
var value = "aabbccddee";
 
// Create a pattern to find the doubled characters.
var pattern = new RegExp( "((\\w)\\2)", "gi" );
 
// Use exec() to keep looping over the string to find the
// matching patterns. NOTE: Since we are using a loop, you MUST
// use the global flag "g", otherwise, this will cause an
// infinite loop to occur.
while (matches = pattern.exec( value )){
 
console.log( matches + "
" );
 
}

执行上面的代码,可以得到下面的结果:

aa,aa,a
bb,bb,b
cc,cc,c
dd,dd,d
ee,ee,e

上面的例子中,我们不但可以得到每个匹配的重复字符串,还可以通过子分组匹配到重复字符串中的每一个字符。

可以看出来,exec 方法可以让我们得到 String 的 match 的能力同时,还具有更深入 String 的 replace 方法的能力。与此同时,exec 方法,还可以更有用处:看看它是如何更新 RegExp 实例的http://www.bennadel.com/blog/697-Javascript-Exec-Method-For-Regular-Expression-Matching.htm

这篇文章并不是想深入 JavaScript 中每个正则表达式的用法,只是做一个全面的介绍。就像我上文中提到,正则表达示是极好的,我只是想有一个更全面的了解。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

英文原文:http://www.bennadel.com/blog/1742-Using-Regular-Expressions-In-Javascript-A-General-Overview-.htm
原文:整理出自 w3cplus

web 前端中文站点评:

只有把 JavaScript 正则表达式的相关基础知识掌握了,才能结合实际需求,运用不同的表达式来实现效果。这样才能真正理解到JavaScript的精髓所在。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:关于如何学习理解 JavaScript 正则表达式
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 1
    web前端中文站2018-08-11 15:01 回复