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.
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.
Example 3 – jQuery Replace Text in Div
See the following example of how to replace text in <div> tag.
Example 4 – jQuery Replace Text in Span
See the following example of how to replace text in <span> tag.
Example 5 – jQuery Replace Text in Textarea
See the following example of how to replace text in <textarea> tag.
Example 6 – jQuery Replace HTML
See the following example of how to replace HTML.
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.
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))
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.
How to Remove OBJ Box From Title and URL in WordPress