Basic knowledge about string replacement in JavaScript

The

replace() method is used to replace some characters with other characters in a string, or replace a substring that matches a regular expression.

Syntax: string.replace(subStr/reg,replaceStr/function)

The first parameter can be a substring of a string or a regular expression. The second parameter can be a string or a processing method. Let’s look at each below

Copy code The code is as follows:

document.write('1234'.replace(1, 'X'));us The result can be obtained: >
document.write('1214'.replace(1, 'X')); We expected the result to be: is a substring, then replace only replaces the first match and stops searching

We change to regular writing Copy code

The code is as follows:

document.write('1214'.replace(/1/g, 'X')); At this time we can get the expected result: X2X4

Let’s look at how function is writtenCopy the code

The code is as follows:

var r = 'abcd'.replace(/w/g, function() {
                                                                                                         
At this time we can see the expected result: XXXX, all characters are replaced with

Copy code

The code is as follows:

var t = document.getElementById('t');
String.prototype.deentityfy = function() {
var entity = {
quot: '"',

lt: '<',
          gt: '>'             };

                                                                                                                                                                                                 

           document.write('<">'.deentityfy());This code is to add a deentityfy method to the JavaScript String object to replace the deentityfy method in the string. HTML characters (replace "with", < with <, > with >), let's ignore the language skills used by the author and see how his replace is used. The first parameter is a regular expression The expression matches the three strings mentioned before. The function of the second parameter actually has two parameters. What are these two parameters? Why does the method get the expected results? Let’s briefly analyze it. First of all, entity[b] is the usage of JavaScript associative array. The value is obtained according to the name of the array data. In order to facilitate understanding, we might as well transform this method to make it simpler so that we can see the function more clearly. What are the parameters? In order to eliminate browser transcoding problems, we modify the replacement string

Copy code


The code is as follows:

String.prototype.deentityfy = function() {
         var entity = {
             a: 'A',
             b: 'B',
             c: 'C'
         };
         return function() {
             return this.replace(/1([^12])2/g, function(a, b) {
                 for (var i = 0; i < arguments.length; i ) {
                     document.write(arguments[i] '
');
                 }
                 document.write('===========================
');
                 var r = entity[b];
                 return typeof r === 'string' ? r : a;
             }); //end of replace
         };
     } ();
     document.write('1a21b21c2'.deentityfy());

这样，我们把方法的参数都打印出来，看看结果是什么

复制代码 代码如下:

a2
a

a21b21c2
===========================
b2

 
a21b21c2
===========================
c2
c

a21b21c2
===========================
ABC

很奇怪对不对，最后的<”>是方法的结果，很正确，得到了预期结果，让我们看看function的参数部分，

function被调用了3次，恰恰是匹配的次数，每次都置换匹配字符串。

每次调用的时候方法有四个参数

第一个参数很简单，是匹配字符串

第二个很诡异，不过每个都看一遍不难得出，第二个参数是正则表达式括号内的匹配的内容

第三个参数和容易想到，是匹配项在字符串中的index

第四个参数则是原字符串

很神奇对不对，但是不是就是这样了呢，我们再写一个试试

复制代码 代码如下:

var r = '1a21b21c2'.replace(/1w2/g, function() {
            for (var i = 0; i < arguments.length; i ) {
                document.write(arguments[i] '
');
            }
            document.write('===========================
')
            return 'X';
        });
        document.write(r);

和前面例子很像，只是简单的把所有匹配项替换为了X，看看结果

复制代码 代码如下:

a2

a21b21c2
===========================
b2

a21b21c2
===========================
c2

a21b21c2
===========================
XXX

出乎意料对不对，结果是预期的，但是参数少了一个，第二项参数不见了，看看究竟还有什么不同——正则表达式中看似多余的括号不见了，上一个例子中，第二项参数恰恰是括号内的匹配项，是不是第二个参数就是正则表达式中括号内的匹配项呢，我们把括号加回来验证一下

复制代码 代码如下:

var r = '1a21b21c2'.replace(/1(w2)/g, function() {
       for (var i = 0; i < arguments.length; i ) {
document.write(arguments[i] '
');
                }
                                         document.write('====================== =======
')
                                                                                                      Result

Copy code

The code is as follows:a2a2

a21b21c2

============================
b2
b2

a21b21c2
===========================
c2
c2

a21b21c2
============================
XXX

As expected, this We now understand what parameters there are in function. Now we should understand it if we look at the most concise examples of JavaScript language. Of course, we need to know associative arrays, immediate execution of functions, closures and arguments objects. If we put all the parameters in one sentence Do you know how to capitalize the first letter of a word?

Copy code

The code is as follows://There are many methods, this is just to verify the theory we just made It was deliberately written in such a troublesome way var sentence = 'i love you'; var upper = sentence.replace(/(w)w*b/g, function(a,b) {

return b.toUpperCase() a.substring(1);

      });
                 document.write(upper); Code


The code is as follows:


//Writing like this is actually enough

var sentence = 'i love you';
var upper = sentence. replace(/w b/g, function(a) {

                                                                                                                                                                                                                     ;