Home >Web Front-end >JS Tutorial >Summary of usage of replace in js_javascript skills

Summary of usage of replace in js_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:06:481360browse

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:


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



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:


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:


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:

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



Copy code


The code is as follows:


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:
for(var i=0;ialert("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:


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