The use of the replace of method in javascript

  • 2020-06-01 08:13:03
  • OfStack

Recently, I was looking at some of ali's front-facing exams. One of them involved the use of the replace () method in javascript. Here is the original question:

"What does the following function do? What should I fill 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 (I still feel like getting a number, I think it is more organized)

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

2, according to the topic, we know that the source of the topic is similar to writing a template engine. Replace placeholders such as' {1}' in the template with arguments passed to it. So arg should be arguments. But!! Since arg is not an array, it is a class array object (if you don't understand, you can baidu it (u_u)), so we need to do some conversion.

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

3, the right hand side is the first empty answer. Say so many, then 2 empty is we need to discuss the focus of the ~ ~ ~ ~ ~ ~ we all know that 2 empty is to find the placeholder through regular, and based on the number of placeholders in replace it into arg array of string, to be honest replace method of the second parameter as a function of rarely met, we met is always the same as a 1, see the following code:


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

4. Since it is rare for the second parameter of replace to be a function, let's focus on the case where the second parameter of replace is a function.

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

Where regexp/substr is required. An regexp object that specifies the string or pattern to be replaced. (note that if the value is a string, use it as the direct qubit text mode to retrieve, rather than being converted to an regexp object first.) replacement required. 1 string value. Specifies the replacement text or the function that generates the replacement text. Finally, a new string is returned after the first or all matches of regexp have been replaced by replacement.

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

6, so the second blank can be written: /\{(\d+)\}/g, put in the statement complete:


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

On the first match, {0} is replaced with arg[0]
On the first match, {1} is replaced by arg[1]
On the first match, {2} is replaced by arg[2]

7. That's the second argument of js string method replace()

That's all for this article, I hope you enjoy it.


Related articles: