Replace text with jQuery [with examples]

Alvaro Trigo Avatar

Follow on Twitter

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

Was this page helpful?