[Solved] jQuery find and replace string

I have somewhere on website a specific text, let’s say “lollypops”, and I want to replace all the occurrences of this string with “marshmellows”. The problem is that I don’t know where exactly the text is. I know I could do something like:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

This would probably work, but I need to rewrite as little HTML as I can, so I’m thinking something like:

  1. search for the string
  2. find the closest parent element
  3. rewrite only the closest parent element
  4. replace this even in attributes, but not all, for example replace it in class, but not in src

In example, I would have structure like this

       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />

In this example, every occurrence of “lollypops” would be replaced, only <img src=" would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?

Enquirer: cypher


Solution #1:

You could do something like this:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");

It will be better to mark all tags with text that needs to be examined with a suitable class name.

Also, this may have performance issues. jQuery or javascript in general aren’t really suitable for this kind of operations. You are better off doing it server side.

Respondent: cypher

Solution #2:

You could do something this way:

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'


Respondent: kgiannakakis

Solution #3:

Below is the code I used to replace some text, with colored text. It’s simple, took the text and replace it within an HTML tag. It works for each words in that class tags.

    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style="color: blue">"+str+"</span>");
Respondent: stecb

Solution #4:

var string ='my string'
var new_string = string.replace('string','new string');

Solution #5:

You could do something like this:


<div class="element">
   <span>Hi, I am Murtaza</span>


$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
Respondent: Sai

Solution #6:

Why you just don’t add a class to the string container and then replace the inner text ? Just like in this example.


             <a class="swapText">lollipops</a>
        <span class="swapText">lollipops</span>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />


$(document).ready(function() {
Respondent: Murtaza JAFARI

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy