The use of the Replace method of JS and regular expression to explain _javascript skills

Source: Internet
Author: User
Tags anonymous
Copy Code code as follows:

<script language= "JavaScript" >
var stringobj= "End ancient People's Republic, end ancient people";

Replace the spelling "end ancient" as "China"
and returns the replaced new character
The value of the original string stringobj has not changed
var newstr=stringobj.replace ("End Ancient", "China");
alert (NEWSTR);
</script>



I am smarter than you, after reading the example above, you will find that the second typo "end ancient" has not been replaced by "China", we can perform two replace method of the second typo "end ancient" also replaced, the program after the improvement is as follows:

<script language= "JavaScript" > var stringobj= "End ancient People's Republic, end ancient people"; Replace the typo "end ancient" as "China"//and return the replaced new character//the original string stringobj value has not changed var Newstr=stringobj.replace ("End Ancient", "China"); Newstr=newstr.replace ("The end of the ancient", "China"); alert (NEWSTR); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

We can carefully think about, if there are N of N times a typo, is not also to perform N-second side replace method to replace the typo?? Oh, don't be afraid, there is a regular expression after the use of a typo to perform a replace method. After the program has been improved, the following code

<script language= "JavaScript" > var reg=new RegExp ("End Ancient", "G"); Create a regular RegExp object var stringobj= "End ancient People's Republic, end ancient people"; var newstr=stringobj.replace (Reg, "China"); alert (NEWSTR); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


The above is about the simplest application of the Replace method, do not know whether we understand?? Let's start with a slightly more complex application.


When you search for articles on some sites, you will find a phenomenon, that is, the search keyword will highlight the color display?? How does this happen?? In fact, we can use regular expressions to achieve, specifically how to achieve it? The simple principle, see the code below



<script language= "JavaScript" > var str= "People's Republic of China, People's Republic of China"; var newstr=str.replace (/(person)/g, "<font color=red>$1</font>"); document.write (NEWSTR); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


The above procedure lacks the interactivity, we improve the program, realizes can enter the character which to look for independently


<script language= "JavaScript" > var s=prompt ("Please enter the character you are looking for", "person"); var reg=new RegExp ("(" +s+ ")", "G"); var str= "People's Republic of China, PRC"; var newstr=str.replace (Reg, "<font color=red>$1</font>"); document.write (NEWSTR); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Maybe everyone will be able to express the meaning of this special character is not very understanding, in fact, the expression is the left side of the expressions in parentheses in the characters, that is, the first child matching, the same can be $ $ for the second child matching. What is a child match?? In layman's terms, that's the left. Each bracket is the first word to match, and the second bracket is the second child match.


When we want to find the characters to do the operation, how to achieve it?? Before we do that, let's talk about getting the parameters of a function ... Inside of function functions, there is a arguments set, which stores all the parameters of the current function, and arguments can get all the parameters of the function, for the sake of understanding, see the following code


<script language= "JavaScript" > Function test () {alert ("Number of arguments:" +arguments.length); Alert ("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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]



After reading the above program, let's look at an interesting program below

<script language= "JavaScript" > var reg=new RegExp ("\\d", "G"); var str= "ABD1AFA4SDF"; Str.replace (Reg,function () {alert (arguments.length);}); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


We were surprised to find that the anonymous function was executed two times, and there are three parameters in the function, why do two times?? This is easy to think, because the regular expression we write is matched to a single number, and the string that is detected is just two digits, so the anonymous function is executed two times. What exactly are the three parameters inside the anonymous function? To figure this out, let's look at the code below.

<script language= "JavaScript" > Function test () {for (Var i=0;i<arguments.length;i++) {alert ("First" + (i+1) + "The value of a parameter:" +arguments[i]); } var reg=new RegExp ("\\d", "G"); var str= "ABD1AFA4SDF"; Str.replace (reg,test); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
After observation we found that the first parameter represents the character to be matched, the second parameter represents the minimum index position (regexp.index) for the match, and the third parameter represents the matched string (regexp.input). In fact, the number of these parameters, but also with the number of child matching to become more. After figuring out these questions, we can use another way of writing

<script language= "JavaScript" > Function test ($) {return "<font color= ' Red ' >" +$1+ "</font>"} var s=prompt ("Please enter the character you are looking for", "person"); var reg=new RegExp ("(" +s+ ")", "G"); var str= "People's Republic of China, PRC"; var newstr=str.replace (reg,test); document.write (NEWSTR); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]


Read the above program, the original can be matched to the character to do whatever. Here's a simple example of an application

<script language= "JavaScript" > var str= "He's 22 years old this year, she's 20 years old, His father is 45 years old, her father is 44 years old this year, a total of 4 people "function test ($) {var gyear= (new Date ()). getyear ()-parseint ($) +1; Return $1+ "(" +gyear+ "); var reg=new RegExp ("(\\d+) years old", "G"); var newstr=str.replace (reg,test); alert (str); alert (NEWSTR); </script>
[ctrl+a All selected note: If you need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.