Summary of the use of replace in js

  • 2020-03-30 01:06:38
  • OfStack

The syntax of replace method is: Stringobj. replace(rgExp, replaceText) where stringObj is a string, reExp can be a regular expression object (RegExp) or a string, and replaceText is a substitute for the string found. To help you understand, here's a simple example

Js code


<script language="javascript">    
    var stringObj=" The final People's Republic, the final people ";    

    //Replace the wrong word "end" with "China" & NBSP;    
    //And returns the replaced new character & PI;    
    //The value of the original string stringObj has not changed & NBSP;    
    var newstr=stringObj.replace(" forever "," China ");    
    alert(newstr);    
    </script>   
 "China" 
 The value of 
 China "); 

You are smarter than me. After reading the above example, you will find that the second typos "terminus" has not been replaced with "China". We can execute the second replace method to replace the second typos "terminus".

Js code


    <script language="javascript">    
    var stringObj=" The final People's Republic, the final people ";    

    //Replace the wrong word "end" with "China" & NBSP;    
    //And returns the replaced new character & PI;    
    //The value of the original string stringObj has not changed & NBSP;    
    var newstr=stringObj.replace(" forever "," China ");    

    newstr=newstr.replace(" forever "," China ");    
 alert(newstr);    
 </script>   
 "China" 
 The value of 
 China "); 
 China "); 

We can think carefully, if there are N to the NTH power of the wrong word, is it necessary to perform N to the NTH power of the replace method to replace the wrong word? Oh,, don't be afraid to perform a replace method without an error after having a regular expression. The code after the program has been improved is as follows

Js code


    <script language="javascript">    
    var reg=new RegExp(" forever ","g"); //Create a regular RegExp object & NBSP;    
    var stringObj=" The final People's Republic, the final people ";    
    var newstr=stringObj.replace(reg," China ");    
    alert(newstr);    
    </script>   

Create a regular RegExp object

The e above is the simplest application of replace method. Now let's start with a slightly more complicated application.

When you search for articles on some websites, you will find such a phenomenon, that is, the search keywords will be highlighted to change the color displayed?? How does this work? We can actually use regular expressions to do this, but how? For a simple principle, see the following code

Js code


    <script language="javascript">    
    var str=" People's Republic of China, People's Republic of China ";    
    var newstr=str.replace(/( people )/g,"<font color=red>$1</font>");    
    document.write(newstr);    
    </script>   

The above program is lack of interactivity, we have to improve the program, to achieve the automatic input to find the characters

Js code


    <script language="javascript">    
    var s=prompt(" Please enter the character you are looking for "," people ");    
    var reg=new RegExp("("+s+")","g");    
    var str=" People's Republic of China, People's Republic of China ";    
    var newstr=str.replace(reg,"<font color=red>$1</font>");    
    document.write(newstr);    
    </script>   
 people ");

Maybe everyone will not understand the meaning of the special character $1, in fact, $1 represents the left expression inside the parentheses of the character, that is, the first child match, the same way you can get $2 represents the second child match. What is a submatch? In layman's terms, each bracket on the left is the first word match, the second bracket is the second child match.

When we want to find the characters of the operation, how to implement? Before e implementing, let's talk about how to get the parameters of a certain function. Inside the Function, there is an arguments set, which stores all the arguments of the current Function. Arguments can get all the arguments of the Function. For your understanding, please see the following code

Js code


    <script language="javascript">    
    function test(){    
       alert(" Number of parameters: "+arguments.length);    
       alert(" Value of each parameter: "+arguments[0]);    
       alert(" The value of the second parameter "+arguments[1]);    
      //You can use the for loop to read all the parameters & NBSP;    
    }    

    test("aa","bb","cc");    
 </script>   
alert("
alert("
alert("
//The loop reads all the parameters

After understanding the above program, let's look at the next interesting program

Js code


    <script language="javascript">    
    var reg=new RegExp("\d","g");    
    var str="abd1afa4sdf";    
    str.replace(reg,function(){alert(arguments.length);});    
    </script>   

We were surprised to find that the anonymous function was executed twice and took three arguments in the function. This is easy to imagine, because the regular expression we wrote matches a single number, and the detected string also happens to have two Numbers, so the anonymous function is executed twice. What are the three arguments inside the anonymous function? To figure this out, let's look at the following code.

Js code


    <script language="javascript">    
    function test(){    
    for(var i=0;i<arguments.length;i++){    
        alert(" The first "+(i+1)+" Values of the following parameters: "+arguments[i]);    
    }    
    }    
    var reg=new RegExp("\d","g");    
    var str="abd1afa4sdf";    
    str.replace(reg,test);    
 </script>   
for(var i=0;i<arguments.length;i++){
alert(" Values of the following parameters: "+arguments[i]);
}

After observation, we found that the first parameter refers to the character to be matched, the second parameter refers to the character minimum index position (regexp. index) when matching, and the third parameter refers to the string to be matched (regexp. input). In fact, the number of these parameters will vary with the number of submatches. Now that we know these things, we can write them the other way

Js code


    <script language="javascript">    
    function test($1){    
      return "<font color='red'>"+$1+"</font>"   
    }    
    var s=prompt(" Please enter the character you are looking for "," people ");    
    var reg=new RegExp("("+s+")","g");    
    var str=" People's Republic of China, People's Republic of China ";    
    var newstr=str.replace(reg,test);    
    document.write(newstr);    
 </script>   
return "<font color='red'>"+$1+"</font>"
 people ");

Read the above program, the original can match to the character to do whatever you want. Here's a quick example of an application

Js code


    <script language="javascript">    
    var str=" This year he 22 She is this year 20 Years old, his father this year 45 Her father this year 44 Years old, total 4 people "   
    function test($1){    
      var gyear=(new Date()).getYear()-parseInt($1)+1;    
      return $1+"("+gyear+" Born in )";    
    }    
    var reg=new RegExp("(\d+) At the age of ","g");    
    var newstr=str.replace(reg,test);    
    alert(str);    
 alert(newstr);    
 </script>   


Related articles: