Use of replace() method in javascript_javascript skills

I was browsing some Alibaba front-end interview questions recently, and one of them involves the use of the replace() method in JavaScript. Here is the original question:

“Tell me what the following functions do? What should be filled in the blank space?”

 // define 
 (function (window) { 
   function fn(str) { 
     this.str = str; 
   } 
   fn.prototype.format = function () { 
     var arg = ______; 
     return this.str.replace(_______, function (a, b) { 
       return arg[b] || ''; 
     }); 
   } 
   window.fn = fn; 
 })(window); 
 // use 
 (function(){ 
   var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
   console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); 
 })();

The following is the analysis process (it feels like it is better to number it, personally I think it is more organized)

1. Because this question also involves other knowledge points, such as anonymous functions, prototypes, etc., but it is not the focus of this discussion.

2. According to the question, we know that the source code of this question is similar to writing a template engine. Replace placeholders such as '{1}' in the template with the parameters passed to it. So arg should be arguments. but! ! ! Since arg is not an array, but an array-like object (if you don’t understand, you can google it yourself (u_u)), so we need to do some conversions,

Copy code The code is as follows:

var arg=Array.prototype.slice.call(arguments,0) ;

3. The right side of the equal sign is the first empty answer. Having said so much, then the second space is the focus of our discussion~~~~~~We all know that the second space is to find the placeholder through regular expressions and convert it according to the numbers in the placeholder. Replace it with the string in the arg array. To be honest, it is rarely encountered that the second parameter of the replace method is a function. Generally, this is the case when we encounter it. Look at the following code:

Copy code The code is as follows:

var pattern=/8(.*)8/;
var str='This is a 8baidu8';
document.write(str.replace(pattern,'$1'));

4. Since there are relatively few situations where the second parameter of replace is a function, let’s focus on the situation where the second parameter is a function.

First of all, this is the syntax of the replace function: stringobject.replace(regexp/substr,replacement)

Where regexp/substr is required. A regexp object that specifies the string or pattern to be replaced. (Note that if the value is a string, it is retrieved as a literal literal pattern rather than first being converted to a regexp object.) replacement required. A string value. Specifies functions for replacing text or generating replacement text. Finally, a new string is returned, which is obtained after replacing the first match or all matches of regexp with replacement.

5. ECMAScript stipulates that the parameter replacement of the replace() method can be a function instead of a string. In this case, the function is called for each match and the string it returns is used as the replacement text. The first parameter represents the matched character, the second parameter represents the minimum index position of the matched character (RegExp.index), and the third parameter represents the matched string (RegExp.input).

6. So the second space can be written like this: /{(d )}/g, and the complete sentence when placed in the statement is:

Copy code The code is as follows:

return this.str.replace(/{(d )}/g, function (a, b) {
Return arg[b] || '';
});

When performing the first match, {0} is replaced by arg[0]
When performing the first match, {1} is replaced by arg[1]
When performing the first match, {2} is replaced by arg[2]

7. The above is the explanation of the second parameter of the js string method replace() as a function (if there are any imperfections, please add them by yourself). Of course, this interview question has also been solved~~~~~

The above is the entire content of this article, I hope you all like it.