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 text function to get its text.
  • Replace the text using replace.
  • Pass the result of this process to the text function 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"));

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

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

See the Pen on CodePen.

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

We have to use the following:

textToReplace.replace(/Hi/g, "Bye");

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

See the Pen on CodePen.

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

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

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

See the Pen on CodePen.

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", ""));

See the Pen on CodePen.

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!");

See the Pen on CodePen.

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

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!