Methods of RegExp and String
Methods of RegExp and String (RegExp和String的方法)
On this page, you will see how various methods work in-depth with regular expressions in JavaScript. (在此页面上,您将深入了解各种方法如何在JavaScript中使用正则表达式。)
Particularly, we will cover methods such as str.match(regexp), str.matchAll(regexp), str.split(regexp|substr, limit), str.search(regexp), str.replace(str|regexp, str|func), regexp.exec(str), and regexp.test(str).
str.match(regexp)
str.match(regexp) (str.match (正则表达式))
The str.match(regexp) method detects matches for regexp in the string str. (Str.match (regexp)方法检测字符串str中正则表达式的匹配项。)
This method includes the following three modes:
let str = "I learn JavaScript";
let result = str.match(/Java(Script)/);
console.log(result[0]); // JavaScript (full match)
console.log(result[1]); // Script
console.log(result.length); // 2
// Additional information:
console.log(result.index); // 8 (match position)
console.log(result.input); // I learn JavaScript
In case you want to get the result as an array, you should write it as follows:
let result = str.match(regexp) || [];
str.matchAll(regexp)
str.matchAll(regexp) (str.matchAll (正则表达式))
The str.matchAll(regexp) method is an enhanced version of the str.match method. Primarily, it is used to look for all matches with all groups. But, it has three differences from str.match, that are as follows:
It doesn’t return an array, but an iterable object with matches. A regular array can be made from it with Array.from. Each match is returned as an array with capturing groups. In case of having no matches, it returns an empty iterable object, not null. (它不返回数组,而是返回具有匹配项的可迭代对象。 可以使用Array.from从它创建常规数组。 每个匹配项都作为包含捕获组的数组返回。 如果没有匹配项,则返回一个空的可迭代对象,而不是null。)
An example of using the str.matchAll(regexp) looks like this:
let str = '<p>Welcome to w3cdoc</p>';
let regexp = /<(.*?)>/g;
let matchAll = str.matchAll(regexp);
console.log(matchAll); // [object RegExp String Iterator], not array, but an iterable
matchAll = Array.from(matchAll); // array now
let firstMatch = matchAll[0];
alert(firstMatch[0]); // <p>
console.log(firstMatch[1]); // p
console.log(firstMatch.index); // 0
alert(firstMatch.input); // <p>Welcome to w3cdoc</p>
Using for..of for looping over the matches of matchAll, Array.from is not needed. (在matchAll的匹配项上使用for.. of for循环,不需要Array.from。)
str.split(regexp|substr, limit)
str.split(regexp|substr, limit)
This method helps to split the string with regexp as a delimiter. (此方法有助于使用正则表达式作为分隔符来拆分字符串。)
The split method can be used with strings, in this way:
console.log('21-34-75'.split('-')) // array of [21, 34, 75]
In the same way, you can split by a regular expression:
console.log('21, 34, 75'.split(/,\s*/)) // array of [21, 34, 75]
str.search(regexp)
str.search(regexp) (str.search (正则表达式))
The str.search(regexp) method is used for returning the position of the first match. In case of finding no match, -1 is returned, like this:
let str = "Welcome to w3cdoc";
console.log(str.search(/docs/i)); // 13 (first match position)
There is an essential limitation, you should note: only the first match is found by the search.
For example, if you want to find more matches, you can use another method such as str.matchAll(regexp). (例如,如果要查找更多匹配项,可以使用其他方法,如str.matchAll (regexp)。)
str.replace(str|regexp, str|func)
str.replace(str|regexp, str|func)
This is a generic method and is used to search and replace one of the most efficient ones. (这是一种通用方法,用于搜索和替换最有效的方法之一。)
It can be used without regexps for searching and replacing a substring, like this:
console.log('21-34-75'.replace("-", ":")) // 21:34-75
The second argument is considered a replacement string, hence a special character can be used in it. (第二个参数被视为替换字符串,因此可以在其中使用特殊字符。)
Here is an example:
let str = "John Smith";
// swap first and last name
console.log(str.replace(/(John) (smith)/i, '$2, $1')) // Smith, John
For situations, requiring smart replacement, the second argument can act as a function. (对于需要智能替换的情况,第二个参数可以作为函数。)
That function can be called with arguments func(match, p1, p2, …, pn, offset, input, groups):
match –it’s the match, p1, p2, …, pn – the capturing group contents (if there exist any), offset – the match position, input – the string of the source,, groups – named groups object. (match -这是匹配, p1、p2、…、pn –捕获组内容(如果存在) , offset –匹配位置, input –源的字符串, , groups –命名的groups对象。)
In case no parentheses exist in the regexp, only three arguments should be used func(str, offset, input). (如果正则表达式中不存在括号,则应仅使用三个参数func ( str、offset、input )。)
Here is an example of uppercasing all the matches:
let str = "javascript and php";
let result = str.replace(/javascript|php/gi, str => str.toUpperCase());
console.log(result); // JAVASCRIPT and PHP
Replacing each match by its position in the string will look as follows:
console.log("Go-go-Go".replace(/Go/gi, (match, offset) => offset)); // 0-3-6
Once using named groups, the groups object is always the last, so it can be obtained like this:
let str = "John Smith";
let result = str.replace(/(?<name>\w+) (?<surname>\w+)/, (...match) => {
let groups = match.pop();
return `${groups.surname}, ${groups.name}`;
});
console.log(result); // Smith, John
When you use a function, it gives you ultimate replacement power: it receives all the information about the match, having access to outer variables.
regexp.exec(str)
regexp.exec(str) (regexp.exec (str))
The regexp.exec(str) method is used for returning a match for the regexp in the string str. The main difference of this method is that it is called on a regexp, not a string. (Regexp.exec (str)方法用于返回字符串str中正则表达式的匹配项。此方法的主要区别在于它在正则表达式上调用,而不是在字符串上调用。)
Its behavior is different depending on whether the regexp includes the g flag or not. (其行为因正则表达式是否包含g标志而异。)
In case of having no g flag, it returns the first match, like the str.match(regexp) method. It won’t bring anything new. (如果没有g标志,则返回第一个匹配项,如str.match (regexp)方法。它不会带来任何新的东西。)
In case of having the str.match(regexp) flag, the following happens:
Calling regexp.exec(str) will return the first match, saving the position right after it in the regexp.lastIndex property. (-调用regexp.exec (str)将返回第一个匹配项,并将其后面的位置保存在regexp.lastIndex属性中。)
The following such call begins the search from the regexp.lastIndex position, returning the next match and saving the position after that in regexp.lastIndex. (-以下此类调用从regexp.lastIndex位置开始搜索,返回下一个匹配项,并将其后的位置保存在regexp.lastIndex中。)
In case of finding no matches, regexp.exec will return null and reset regexp.lastIndex to 0. (-如果找不到匹配项, regexp.exec将返回null ,并将regexp.lastIndex重置为0。)
The regexp.exec method can be used to look from a specific position by manually setting lastIndex. (通过手动设置lastIndex ,可以使用regexp.exec方法从特定位置查看。)
Here is an example:
let str = 'Welcome to w3cdoc';
let regexp = /\w+/g; // without flag "g", lastIndex property will be ignored
regexp.lastIndex = 10; // look for from the tenth position (from the comma)
console.log(regexp.exec(str)); // w3cdoc
In case of replacing the g flag with y, no matches will be found, because at position 5 there is no word:
let str = 'Welcome to w3cdoc';
let regexp = /\w+/y;
regexp.lastIndex = 10; // look for right at position 5
console.log(regexp.exec(str)); // null
This method is handy in circumstances when it is necessary to read something from the string with regexp, at a certain position, not further. (在需要使用正则表达式从字符串中读取某些内容的情况下,这种方法非常方便,在某个位置,而不是更进一步。)
regexp.test(str)
regexp.test(str) (regexp.test (str))
The regexp.test(str) method searches for a match, returning true/false depending on whether it exists or not. (Regexp.test (str)方法搜索匹配项,根据匹配项是否存在返回true/false。)
Here is an example with a positive result:
let str = "I learn JavaScript";
// these two tests do the same
console.log(/learn/i.test(str)); // true
console.log(str.search(/learn/i) != -1); // true
How, let’s check out one with a negative result:
let str = "Go-go-go";
console.log(/like/i.test(str)); // false
console.log(str.search(/like/i) != -1); // false
If the regexp has g flag, then this method searches from the regexp.lastIndex property and updates like the regexp.exec method. Hence, it can be used for searching from a specific position, like this:
let regexp = /like/gi;
let str = "I like JavaScript";
// start the search from position 11:
regexp.lastIndex = 11;
console.log(regexp.test(str)); // false (no match)
It is also essential to know that using the same global regexp to different inputs, it can bring wrong results because regexp.test call advances the regexp.lastIndex property. Therefore, the search in another string can start from the non-zero position. (同样重要的是要知道,对不同的输入使用相同的全局正则表达式可能会带来错误的结果,因为regexp.test调用会推进regexp.lastIndex属性。因此,在另一个字符串中的搜索可以从非零位置开始。)
Let’s check out an example:
let regexp = /javascript/g; // (regexp.lastIndex=0)
console.log(regexp.test("javascript")); // true (regexp.lastIndex=10 now)
console.log(regexp.test("javascript")); // false
It happens as in the second test regexp.lastIndex is non-zero. For working around that, it is possible to set regexp.lastIndex = 0 before every search.Rather than calling methods on regexp, you can use string methods str.match/search/… that don’t use lastIndex. (发生这种情况,因为在第二个测试中, regexp.lastIndex为非零。 为了解决这个问题,可以在每次搜索之前设置regexp.lastIndex = 0。您可以使用不使用lastIndex的字符串方法str.match/search/ … ,而不是在正则表达式上调用方法。)