How to Replace String, Text or HTML in jQuery?

The replace() function is a jQuery function that can be used to replace elements that have been declared by the end-user. Each element is a set of matched elements that will be provided with new contents. It returns the set of elements that have not been removed by the end-user as well as only the removed elements.

These replace() methods have a few child methods, such as replaceAll() and replaceWith(). These replacements will be done by integrating target elements with the set of achieved items on the list, which might be a collection of strings.

Only the first instance of the value will be changed if you’re replacing a value rather than a regular expression. Use the global (g) modifier to replace all instances of a given value.

Table of Contents

1 jQuery Replace String, Text, or HTML Element

1.1 Example 1 – jQuery Replace String

1.2 Example 2 – jQuery Replace Text

1.3 Example 3 – jQuery Replace Text in Div

1.4 Example 4 – jQuery Replace Text in Span

1.5 Example 5 – jQuery Replace Text in Textarea

1.6 Example 6 – jQuery Replace HTML

1.7 Example 7 – jQuery Replace Text with replaceAll() function

1.8 Example 8 – jQuery Replace Text with replaceWith() function

2 Conclusion

jQuery Replace String, Text, or HTML Element

Using the jQuery replace() function you can replace the specific string from the sentence. So if you want to change or replace the string from the sentence or text then use the replace function.

First, we will target that element where we want to make changes then we run the replace function by passing the targeted element and string. It will only replace the string at the first occurrence from the sentence. It means when you run the replace() function it will search the replaceable text from the sentence and where it is found it will stop.

Note: You need to use the replaceAll() function to replace all the occurrences of a string. We will cover later in the examples below.

Example 1 – jQuery Replace String

Let’s see the example of the jquery replace() function to replace the string.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace String</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace String Example</h2>

		<p id="demo">Where you want to use jQuery replace() function?</p>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace the 'function' string with 'method'</p>

		<script>
			jQuery('button').click(function() {
			    var text = jQuery("#demo").text();
			    text = text.replace("function", "method");  
			    jQuery("#demo").text(text);
			});
		</script>

	</body>
</html>

In the above example, when you click on the Replace button then it will replace the ‘function’ string with ‘method’ in the given paragraph.

Demo

Example 2 – jQuery Replace Text

Let’s replace the full text of the element with replace() function. See the example code below.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace Full Text</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace Full Text Example</h2>

		<p id="demo">Where you want to use jQuery replace() function?</p>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace the full text with custom text.</p>

		<script>
			jQuery('button').click(function() {
			    var text = "Replaced with the question.";
			    jQuery("#demo").text(text);
			});
		</script>

	</body>
</html>

The above example will replace the whole text with the custom text. See the codepen demo example from the below link.

Demo

Example 3 – jQuery Replace Text in Div

See the following example of how to replace text in <div> tag.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace Div Text</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace Text in Div Example</h2>

		<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace the div element text.</p>

		<script>
			jQuery('button').click(function() {
			    var text = "Hello World!"
			    jQuery("div").text(text);
			});
		</script>

	</body>
</html>

Demo

Example 4 – jQuery Replace Text in Span

See the following example of how to replace text in <span> tag.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace Span Text</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace Text in Span Example</h2>

		<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace the span element text.</p>

		<script>
			jQuery('button').click(function() {
			    var text = "Hello World!"
			    jQuery("span").text(text);
			});
		</script>

	</body>
</html>

Demo

Example 5 – jQuery Replace Text in Textarea

See the following example of how to replace text in <textarea> tag.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace Textarea Text</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace Textarea Text Example</h2>

		<textarea>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</textarea>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace the textarea value.</p>

		<script>
			jQuery('button').click(function() {
			    var text = "Hello World!"
			    jQuery("textarea").val(text);
			});
		</script>

	</body>
</html>

Demo

Example 6 – jQuery Replace HTML

See the following example of how to replace HTML.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Replace HTML</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery Replace HTML Example</h2>

		<p id="html">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

		<button>Replace</button>

		<p><strong>Note:</strong> It will change the HTML element.</p>

		<script>
			jQuery('button').click(function() {
			    var html = "<strong>HTML element changed</strong>";
			    jQuery("p#html").html(html);
			});
		</script>

	</body>
</html>

Demo

Example 7 – jQuery Replace Text with replaceAll() function

The replaceAll() function is a child function of replace() function. It will replace all the matched occurrences with custom text.

Syntax

$(content).replaceAll(selector)

See the following example of how to replace text using the replaceAll() function.

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery ReplaceAll Text</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery ReplaceAll Text Example</h2>

		<p id="demo">The replace() function is jquery function. This function used to replace text.</p>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace  all the 'function' string with 'method'</p>

		<script>
			jQuery('button').click(function() {
			    var text = jQuery("#demo").text();
			    text = text.replaceAll("function", "method"); 
                            jQuery("#demo").text(text);
			});
		</script>

	</body>
</html>

Demo

Example 8 – jQuery Replace Text with replaceWith() function

The replaceWith() function is also the child function of replace() function. It will replace selected elements with new custom text.

Syntax

$(selector).replaceWith(content,function(index))

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery ReplaceWith Function</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>

	<body>

		<h2>jQuery ReplaceWith Function Example</h2>

		<p id="demo">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

		<button>Replace</button>

		<p><strong>Note:</strong> It will replace  all the 'p' text with custom.</p>

		<script>
			jQuery('button').click(function() {
			    var text = jQuery("#demo");
                            text.replaceWith("Hello World!");  
			});
		</script>

	</body>
</html>

Demo

Conclusion

So in this tutorial, you learned the jquery replace() function, how to replace string, text, or HTML elements with a specific string.

You also learned the replaceAll() function to replace all the matched occurrences in the paragraph text. If you have any questions please put in the comment section.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to Replace String, Text or HTML in jQuery?

jQuery Replace String, Text, or HTML Element

Example 1 – jQuery Replace String

Example 2 – jQuery Replace Text

Example 3 – jQuery Replace Text in Div

Example 4 – jQuery Replace Text in Span

Example 5 – jQuery Replace Text in Textarea

Example 6 – jQuery Replace HTML

Example 7 – jQuery Replace Text with replaceAll() function

Syntax

Example 8 – jQuery Replace Text with replaceWith() function

Syntax

Conclusion

Leave a Comment Cancel reply

Product Highlight

Recent Posts

How to Change Apply Coupon Button Text In WooCommerce?

Add a Continue Shopping Button to WooCommerce Cart and Checkout Page

How to Create a Right-Click Context Menu in React?

How to Create Custom Back Button with React Router?

How to Create a Blog Post Template in WordPress?

jQuery Replace String, Text, or HTML Element

Example 1 – jQuery Replace String

Example 2 – jQuery Replace Text

Example 3 – jQuery Replace Text in Div

Example 4 – jQuery Replace Text in Span

Example 5 – jQuery Replace Text in Textarea

Example 6 – jQuery Replace HTML

Example 7 – jQuery Replace Text with replaceAll() function

Syntax

Example 8 – jQuery Replace Text with replaceWith() function

Syntax

Conclusion

Related Posts

Leave a Comment Cancel reply

Product Highlight

Recent Posts