The syntax of the replace method is: stringObj.replace(rgExp, replaceText) where stringObj is a string (string), reExp can be a regular expression object (RegExp) or a string (string), and replaceText is a replacement for the found string. . . In order to help everyone understand better, let’s give a simple example below.
Js code
Copy the code code as follows:
<script language="javascript">
var stringObj="Zhonggu People's Republic, Zhonggu People";
//Replace the typo "Zhonggu" with "China"
//And return the replaced new character
//The value of the original string stringObj has not changed
var newstr=stringObj.replace("Zhonggu","China");
alert(newstr);
</script>
"Zhonggu" is "China"
The value of
China");
If you are smarter than me, after reading the above example, you will find that the second typo "Zhonggu" has not been replaced with "China". We can execute the secondary replace method to replace the second typo "Zhonggu". The program has been improved as follows:
Js code
Copy the code code as follows:
<script language="javascript">
var stringObj="Zhonggu People's Republic, Zhonggu People";
//Replace the typo "Zhonggu" with "China"
//And return the replaced new character
//The value of the original string stringObj has not changed
var newstr=stringObj.replace("Zhonggu","China");
newstr=newstr.replace("Zhonggu","China");
alert(newstr);
</script>
"Zhonggu" is "China"
The value of
China");
China");
We can think about it carefully. If there are N to the Nth power of typos, should we also execute the N to the Nth power replace method to replace the typos? ? Oh, don't be afraid. With the regular expression, you don't have to execute the replace method once for a typo. . The code after the program has been improved is as follows
Js code
Copy the code code as follows:
<script language="javascript">
var reg=new RegExp("久古","g"); //Create a regular RegExp object
var stringObj="Zhonggu People's Republic, Zhonggu People";
var newstr=stringObj.replace(reg,"China");
alert(newstr);
</script>
Create a regular RegExp object
The above is the simplest application of the replace method. I wonder if you understand it? ? Let’s start with a slightly more complex application. .
When you search for articles on some websites, you will find this phenomenon, that is, the search keywords will be highlighted and changed in color? ? How is this achieved? ? In fact, we can use regular expressions to achieve it. How to achieve it? Please see the code below for the simple principle
Js code
Copy the code code as follows:
<script language="javascript">
var str="People's Republic of China, People's Republic of China";
var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");
document.write(newstr);
</script>
The above program lacks interactivity. Let’s improve the program so that you can independently enter the characters you want to find.
Js code
Copy the code code as follows:
<script language="javascript">
var s=prompt("Please enter the characters you are looking for", "person");
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 doesn’t quite understand what the special character $1 means. In fact, $1 represents the characters in the brackets in the expression on the left, that is, the first submatch. In the same way, $2 represents the second submatch. . What is a submatch? ? In layman's terms, each bracket on the left is the first word match, and the second bracket is the second submatch. .
When we want to perform operations on the found characters, how to implement it? ? Before implementing it, let's first talk about how to get the parameters of a certain function. . Inside the function, there is an arguments collection. This collection stores all the parameters of the current function. All parameters of the function can be obtained through arguments. For your understanding, please see the following code.
Js code
Copy the code code as follows:
<script language="javascript">
function test(){
alert("Number of parameters:"+arguments.length);
alert("The value of each parameter: "+arguments[0]);
alert("The value of the second parameter"+arguments[1]);
//You can use a for loop to read all parameters
}
test("aa","bb","cc");
</script>
alert("
alert("
alert("
//Loop to read all parameters
After understanding the above program, let's look at the following interesting program
Js code
Copy the code code as follows:
<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 there were three parameters in the function. Why was it executed twice? ? This is easy to think of, because the regular expression we wrote matches a single number, and the string being detected happens to have two numbers, so the anonymous function is executed twice. . What are the three parameters inside the anonymous function? ? To clarify this issue, let's look at the following code.
Js code
Copy the code code as follows:
<script language="javascript">
function test(){
for(var i=0;i<arguments.length;i++){
alert("The value of the "+(i+1)+"th parameter: "+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 parameters: "+arguments[i]);
}
After observation, we found that the first parameter represents the matched character, the second parameter represents the minimum index position of the character when matching (RegExp.index), and the third parameter represents the matched string (RegExp.input). In fact, the number of these parameters will increase as the number of submatches increases. After clarifying these issues, we can use another way of writing
Js code
Copy the code code as follows:
<script language="javascript">
function test($1){
return "<font color='red'>"+$1+"</font>"
}
var s=prompt("Please enter the characters you are looking for", "person");
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");
After reading the above program, it turns out that you can do whatever you want with the matched characters. Here is a simple application example:
Js code
Copy the code code as follows:
<script language="javascript">
var str="He is 22 years old, she is 20 years old, his father is 45 years old, and her father is 44 years old, there are 4 people in total"
function test($1){
var gyear=(new Date()).getYear()-parseInt($1)+1;
return $1+"("+gyear+"birth year)";
}
var reg=new RegExp("(//d+)years old","g");
var newstr=str.replace(reg,test);
alert(str);
alert(newstr);
</script>