To replace the text of any element using jQuery use the text function together with the replace function of JavaScript. For example: $("#element").text($("#element").text().replace("Hi", "Bye"));.
Here’s the step by step process:
- Find and select the element containing the text.
- Use the jQuery
textfunction to get its text. - Replace the text using
replace. - Pass the result of this process to the
textfunction to the same element.
The
replace()admits two parameters. The first is the value we want to replace (or the regular expression) and the second is the new string that will replace it. It returns the new generated string.
Let’s say we have a string saying “Hi Paul” and we want to replace it for “Bye Paul”.
We can do it all in a single line like this:
// Assuming #element is the ID of the element containing
// the text to be replaced
$("#element").text($("#element").text().replace("Hi", "Bye"));
Code language: JavaScript (javascript)If that looks a bit confusing to you, we can split it in multiple lines to make it easier to read:
// Same as above, but spread in multiple lines
const element = $("#element");
const textToReplace = element.text();
const newText = textToReplace.replace("Hi", "Bye");
element.text(newText);
Code language: JavaScript (javascript)Easy right? Now, what if you want to change the text when clicking on a button? Or perhaps you want to replace multiple paragraphs?
Here’s a list of the most common scenarios for text replacement. All of them using jQuery:
Examples replacing strings in jQuery:
Replace the text of an element on click:
const changeText = (e) => {
// Multiple lines solution
const element = $("#element");
const textToReplace = element.text();
const newText = textToReplace.replace("Hi", "Bye");
element.text(newText);
};
// Attaching the click event on the button
$(document).on('click', '#changeText', changeText);
Code language: JavaScript (javascript)Replace multiple appearances of the same string
In order to replace all appearances of a string we have to use regular expressions. Instead of using this:
textToReplace.replace("Hi", "Bye");
Code language: JavaScript (javascript)We have to use the following:
textToReplace.replace(/Hi/g, "Bye");
Code language: JavaScript (javascript)Notice we also removed the double quotes around “Hi” and we added the global flag g after the last /. This is what allows us to search globally, or in other words, to look for all appearances for the searched string.
Here’s an example:
// Replaces all appearances of "Hi" for "Bye"
var element = $("#element");
element.text(element.text().replace(/Hi/g, "Bye"));
Code language: JavaScript (javascript)Replace multiple words at the same time
We’ll have to use a regular expression as we did above, but this time, to add multiple words, we will separate them by |.
// Replaces the words "Hi", "Hello" and "Hey" for "Bye"
element.text(element.text().replace(/Hi|Hello|Hey/g, "Bye"));
Code language: JavaScript (javascript)Replace case-insensitive text
This applies when you want to replace a string no matter if it appears in uppercases, lowercases or a combination of both.
Again, we’ll have to use regular expressions for it. We’ll make use of the i flag that we’ll pass after the last /, together with the g that allows for a global search as mentioned before:
// Replacing "Hi" and "hi" for "Bye"
element.text(element.text().replace(/hi/gi, "Bye"));
Code language: JavaScript (javascript)Replace a word in multiple texts
Let’s imagine we want to replace a word in multiple elements in our website. All we have to do is iterate over them and call our function or just call the function multiple times on each of them:
// Iterating over all <li> elements to replace a word
$('#myList li').each(function(){
$(this).text($(this).text().replace(/Hi/g, "Bye"));
});
// Replacing two other texts in other elements
var element1 = $('#element1');
var element2 = $('#element2');
element1.text(element1.text().replace(/Hi/g, "Bye"));
element2.text(element2.text().replace(/Hi/g, "Bye"));
Code language: JavaScript (javascript)Remove text using replace
Of course, you can use this same method to replace any text for an empty string removing the searched string from our text.
// Removing word from a string using jQuery
var element = $("#element");
element.text(element.text().replace("Hi", ""));
Code language: JavaScript (javascript)Replace a whole text, word, or sentence
We can replace the whole text of any element on our page by using the text function of jQuery. It’s even more simple yet:
$("#element").text("What's up!");
Code language: JavaScript (javascript)Replace HTML string with jQuery
In a similar way, we can replace the whole HTML content by using the html function:
$("#element").html("<i>This is my italic text</i>");
Code language: JavaScript (javascript)Conlusion
By using jQuery in combination of JavaScript functions we are able to replace strings in elements, texts and even JavaScript variables.
Unlike in other languages, in JavaScript the replacement of multiple appearances forces us to use regular expressions. This can be a bit more scary at first and once you know the basis it opens a whole new world of opportunities for us.
I hope this articles serves as a way to clarify the different ways we can use jQuery to replace strings and texts on your site.
If you are learning JavaScript check out what’s the best way to learn JavaScript!
