Monday, December 5, 2011

Replace funtion in Javascript

Replace function description:
The replace function, replace(), looks for a substring in the given string and replaces that with new value provided.

The syntax for using this is:

string.replace(substring,newstring)

Example:
Assume variable string has values assigned as string ="AtoZ on Tech"
Using replace functin on this, provide the substring and newstring to replace
i.e
<script type="text/javascript">
var string="AtoZ on Tech";
string=string.replace("to","2");
document.write(string);
</script>


Output:
A2Z on Tech

Done a slight modification in susbstring. Will this work?

<script type="text/javascript">
var string="AtoZ on Tech";
string=string.replace(/to/,"2");
document.write(string);
</script>


Yes, this works same exactly as the above code.

Will the below code work?
<script type="text/javascript">
var string="AtoZ on Tech";
string=string.replace("To","2");
document.write(string);
</script>


No, as here "T" is in uppercase. So, how can we have a case-insensitive search and replace?
<script type="text/javascript">
var string="AtoZ on Tech";
string=string.replace(/To/i,"2");
document.write(string);
</script>


Output: A2Z on Tech

Now, let me extend our string variable. as below.
<script type="text/javascript">
var string="AtoZ on Tech";
string= string + " is a blogsite discussing all about technology from A to Z";
string=string.replace(/To/i,"2");
document.write(string);
</script>


Output:A2Z on Tech is a blogsite discussing all about technology from A to Z
The second "A to Z" is as it is. Here only the first occurance is replaced. How to replace all the occurences of search string?

Then you should give the option for global represented by "g.

<script type="text/javascript">
var string="AtoZ on Tech";
string= string + " is a blogsite discussing all about technology from A to Z";
string=string.replace(/To/ig,"2");
document.write(string);
</script>


Now you know that we have used "i" for case-insensitive matching and "g" for global matching. These are called modifiers. Modifiers will specify what kind of search we have to do. There is one more modifier used in javascript, ie "m" for multiline matching. This we will be discussin in our later blogs.


Ok. So far is fine. What if you dont have a specific substring and you have only a pattern to be replaced?

Then you have to go for Regular Expression.

What is Regular Expression?
Regular Expression gives a pattern of characters like a-z for chars, 0-9 for int and can have some special character pattern as well.

Using regular expression we search for any pattern defined in the regular expression(RegExp) and replace it with the required string/value.

<script type="text/javascript">
var string="A2Z on Tech";
string=string.replace(/[^a-z,0-9]/ig,"-");
document.write(string);
</script>


The above code looks for a pattern match (any character other than a-z, A-Z and number 0-9) and is replaced by -. (This is one which we generally use to generate SEO friendly URL)

No comments:

Post a Comment