Summary of usage of replace in js_javascript skills-JS Tutorial-php.cn

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 is a 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 code The code is as follows: var stringObj="Zhonggu People's Republic, Zhonggu People";

//Replace the typo "Zhonggu" with "China" //The value of the original string stringObj has not changed. var newstr=stringObj.replace("Zhonggu","China"); alert(newstr); Zhonggu" For "China" the value has not changed China");

If you are smarter than me, after reading the above example, you will find that the second typo "Zhonggu" does not change has not been replaced with "China", we can execute the secondary replace method to replace the second typo "Zhonggu". The program is improved as follows: Js code

Copy code The code is as follows: var stringObj="Zhonggu People's Republic, Zhonggu People";

//Replace the typo "Zhonggu" with "China" //The value of the original string stringObj has not changed. var newstr=stringObj.replace("Zhonggu","China");

newstr=newstr.replace("Zhonggu","China"); alert(newstr); The value of "Zhonggu" is "China" has not changed China"); China");

We can think about it carefully, if there are N^Nth power typos, do we also need to execute N^Nth power replace method to replace the typos? Oh, don't be afraid, there is a regular expression? There is no need to execute the replace method after the formula. The code after the program is improved is as follows . Js code Copy code

The code is as follows: replace(reg,"China"); alert(newstr);

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 code

The code is as follows:

var str="People's Republic of China, People's Republic of China"; var newstr=str.replace(/(人)/g," $1 "); document.write(newstr); The above program lacks interactivity. Let’s improve the program so that you can input the characters you are looking for independently Js code

Copy code The code is as follows: 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," $1 "); document.write(newstr ); The characters in the brackets are the first sub-match. In the same way, $2 means the second sub-match. In layman's terms, each bracket on the left is the first sub-match, and the second sub-match is the same. The bracket is the second submatch. When we need to perform operations on the found characters, how do we do it? ? Before implementing it, let's first talk about how to get the parameters of a certain function. . Inside the function 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 code

The code is as follows: 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"); alert(" alert(" alert(" //Loop to read all parameters

After understanding the above program, let’s look at the following interesting program

Js code

Copy code

The code is as follows: var reg=new RegExp("\d","g"); var str="abd1afa4sdf"; str.replace(reg,function(){alert(arguments.length );});

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? What about times? ? 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 code

The code is as follows: function test(){ for(var i=0;i alert("The value of the "th" (i 1) "parameter:" arguments [i]); } } } var reg=new RegExp("\d","g"); var str="abd1afa4sdf"; str.replace(reg ,test); for(var i=0;i alert("value 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 code The code is as follows: function test($1){ return " " $1 " " } var s=prompt("Please Enter the characters you are looking for ","人"); 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); return " " $1 " " 人");

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 code The code is as follows: var str="He is 22 years old, she is 20, his father is 45, and her father is 44, a total of 4 people" function test($1){ var gyear=(new Date()).getYear()-parseInt($1) 1; return $1 "(" gyear "year of birth)"; } var reg=new RegExp(" (\d )years","g"); var newstr=str.replace(reg,test); alert(str); alert(newstr); </script&gt ;

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Summary of usage of replace in js_javascript skills