How to Replace String, Text or HTML in jQuery?

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.

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.

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.

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.

Demo

Example 4 – jQuery Replace Text in Span

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

Demo

Example 5 – jQuery Replace Text in Textarea

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

Demo

Example 6 – jQuery Replace HTML

See the following example of how to replace 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.

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))

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.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *