How To Use the JavaScript String replace() Procedure

To use the JavaScript String replace() Procedure you must first show what it is that you want to replace using this method. Below we will look at different things to replace with the JavaScript String replace() feature.

What Can I replace Using The JavaScript String replace() feature?

Virtually anything that you can target with JavaScript you can replace. Text, div id’s and classes can all be changed with the JavaScript String replace() procedure.

Examples of the JavaScript String replace() Procedure

Look at the buttons below, you will see a list of different buttons. All of them are using a onClick event so I can show you how to use the String replace() procedure in JavaScript. The codes for those buttons are below. However remember that you can use these functions on other events like a onload event.

Only cool people share!

Here are the button codes, Functions and Examples we will be using.

Button to change first set of text matches in a text string.

[code]<button onClick="changeFirstText()">Change First Text Match</button>[/code]

The function to change first set of text matches in a string.

[code]<script>
function changeFirstText() {
document.body.innerHTML = document.body.innerHTML.replace(‘easy’, ‘<span class="highlightred">somewhat easy</span>’)
};
</script>[/code]

Example Text

This is an example of changing the first match in a string with JavaScript. If you hit the button on the right sidebar it will change the text. JavaScript is eazy to program with. Here we changed the word “eazy” with somewhat eazy. We also highlighted it in red so it stands out.

Button to change every match in all text strings.

[code]<button onClick="changeAllText()">Change All Text Matches</button>[/code]

The function that changes the all the matching text.

[code]<script>
function changeAllText() {
document.body.innerHTML = document.body.innerHTML.replace(/great/g, ‘<span class="highlightred">awesomeness</span>’)
};
</script>[/code]

Example text for changing several text matches in a string with JavaScript

In this example of changing text with JavaScript we are going to target the word great and change it to awesomeness. JavaScript string replace is a great procedure to learn You will become a great JavaScript programmer one of these days if you keep up with these great tutorials.

Button to change all text in a div id.

[code]<button onClick="changeDivId()">Change Div Id</button>[/code]

The JavaScript Function that will change everything in a div id.

[code]<script>
function changeDivId() {
document.getElementById("changetext").innerHTML = "<span class="highlightred">We just replaced everything in the changetext div id to what you see here in red!</span>"
};
</script>[/code]

Here is some example text that we are going to change in a div id.

We are going to change all the text in this div called “changetext”

Limitations of JavaScript String replace() Procedure

You can only replace letters and number with this procedure. If you try to replace special characters like “&” this method will not work.

We also added a little style in CSS so we can easily see the changes on the page.

[code]<style>
.highlightred{color:red;}
</style>[/code]

How To Use the JavaScript String replace() Procedure was last modified: May 24th, 2015 by Maximus Mccullough

Summary

Article Name