Updated April 14, 2023
Introduction to jQuery replace string
This article talks about the jQuery replacement functionality which returns a new string after replacing each target element with the set of matched elements. This method can be used to replace the occurrence of any string in a sentence or a group of strings. Using the replace() method, only the first instance can be replaced, to remove all the occurrences, the global modifier(g) needs to be used.
jQuery offers several functionalities to help manipulate the DOM, one of them being DOM replacement. Using the replace() method of jQuery, we can find and replace all the occurrences of a particular substring in a string or a string in a group of strings. jQuery also offers two other methods for DOM manipulation with replace feature, replaceAll(), and replaceWith(). replaceAll() method is used to replace each target element with a set of matched elements. replaceWith() method is used to replace each element with the new content provided and return the set of removed elements.
Syntax
1. Replacing a text globally using jQuery replace method:
string.replace (/[old string]/+/g, 'new string')2. Replacing a target element using replaceAll() method:
$(content).replaceAll(selector)3. Replacing the selected content with the new one using replaceWith() method:
$(selector).replaceWith(content, function(index))Explanation: where, content is a mandatory parameter which specifies the content to be inserted, possible values being, HTML elements, jQuery objects, and HTML elements. function(index) is an optional parameter that specifies a function that returns the content to be replaced.
Examples to Implement jQuery replace string
Let us take a look at some of the examples to understand the replacement occurs using jQuery:
Example #1
Given below is a very simple example that replaces a string with another one using jQuery replace() method:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery example to replace a string</title>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".element span").text(function (index, text) {
return text.replace("Example", "jQuery Tutorial");
});
});
</script>
<style>
#divstyle {
width: 400px;
height: 150px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
color: black;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<div class="element">
<br />
<span>Example to replace a string</span>
<hr />
<p style="color: brown;">
Example to replace a string using jQuery
</p>
</div>
</div>
</body>
</html>
</head>
</html>Output:
Below is the screen which gets displayed once the above code gets executed:
Explanation: jQuery replace() method searches for the specified string value and returns the specified replaced value. In the given example, string Example gets replaced with the string jQuery Tutorial as shown in the picture.
Example #2
The following example illustrates the usage of removeAll() of jQuery:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("<p>jQuery replaceAll</p>").replaceAll("p");
});
});
</script>
<style>
#divstyle {
width: 600px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
#button {
color: navy;
font-weight: bold;
font-size: large;
border: oldlace;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div id="divstyle">
<p>jQuery tutorial for replacing a string</p>
<p>Using replaceAll method</p>
<p>Replaces the selected element with the new one.</p>
<button id="button">Click to see the change</button><br />
</div>
</body>
</html>Output:
The below screen gets displayed when the above code gets executed:
Explanation: The replaceAll() method replaces each target element with the set of matched elements. In the given example, we first create an element <p>jQuery replaceAll</p> and then replace other element “p” with it.
Example #3
The following example illustrates the usage of replaceWith() of jQuery:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#pid").replaceWith("jQuery replaceWith");
});
});
</script>
<style>
#divstyle {
width: 600px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
#button {
color: navy;
font-weight: bold;
font-size: large;
border: oldlace;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div id="divstyle">
<p id="pid">jQuery tutorial</p>
<hr />
<p>replaceWith() method replaces the selected contents with new one</p>
<button id="button">Click here to see the change</button>
</div>
</body>
</html>Output:
Below screen gets displayed when the above code gets executed:
Explanation: replaceWith() method provided by jQuery replaces each element in the set of matched elements with the new content. In the given example, on button click, the content of “pid” element gets replaced with the string “jQuery replaceWith” as shown below.
Example #4
Let us also take a look at another example in replacing a string using jQuery in a different way:
Code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Example to Replace a string</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
var NewString = $('body').html().replace(/\./g,'---');
$('body').html(NewString);
});
</script>
<style>
#button{
color:navy;
font-weight: bold;
font-size: large;
border: oldlace;
background-color: palegoldenrod;
}
#divstyle {
width: 350px;
height: 100px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id ="divstyle">
<div class="String">
<span>jQuery replace a string.</span><br><br>
</div>
</div>
</div>
</html>Output:
Below screen gets displayed when the above code gets executed:
Explanation: In the given example, we are taking all the HTML within the <body> tags into a string variable and then find all the occurrences of the string (“/g” is used) to be replaced using a new one with the help of replace()
Conclusion
In this article, we discussed one of the jQuery ways to manipulate DOM using jQuery to replace functionality. jQuery DOM replacement methods are mainly used to remove content from the DOM and replace it with new content provided. Here, we discussed about replace(), replaceAll() and replaceWith() methods of jQuery which helps in DOM/ HTML replacement.
Recommended Articles
This is a guide to jQuery replace string. Here we discuss an introduction to jQuery replace string, syntax with programming examples. You can also go through our other related articles to learn more –
