1

I need to change a bunch of different words on a page using jQuery. This is the code I have so far:

(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace([/My Classes/g, 'My Levels'],));
})(jQuery)

How do I modify this code so I can find and replace more words? Lets say I also want to replace "dog" with "cat" and "boy" with "girl".

Nate Allen
  • 238
  • 5
  • 16

3 Answers3

3

What you could do is if you chain the replace values such as:

thePage.html(thePage.html().replace([/My Classes/g, 'My Levels'],))
                            .replace([/dog/g, 'cat'],))
                            .replace([/bird/g, 'pen'],));

EDIT:

Here is the updated code with what you've provided on jsfiddle

(function($) {

    $(function(){
    var thePage = $("body");
    thePage.html(thePage.html().replace(/My Classes/g, 'My Levels').replace(/dog/g, 'cat').replace(/bird/g, 'pen'));
    });

})(jQuery)​

And the jsfiddle link:

http://jsfiddle.net/BEftd/4/

Bogdan Emil Mariesan
  • 5,529
  • 2
  • 33
  • 57
  • 1
    For a small number of replacements this works well. I might put the values and their replacements in an array and use a loop to process them for easier editing if there is many or they change a lot. – knabar Mar 28 '12 at 15:34
  • If you can do something like `var replace = {'boy':'girl', 'this':'that'}` And `replace(function() { // replace using above});` that would be an elegant version of what you have here. +1 – Churk Mar 28 '12 at 15:46
1

Try this elegant solution from over here

for (var val in array)
    text= text.split(val).join(array[val]);

You can define an array of key-value pairs representing your search and replace terms, then loop through it like this. No jQuery needed!

Community
  • 1
  • 1
Johno
  • 1,959
  • 1
  • 15
  • 15
  • do val represent your delimiter? why would you do this? text.split(val) – Churk Mar 28 '12 at 15:39
  • @Churk It works by splitting the text (your HTML) into an array separated by the search term. e.g. splitting 'My lovely string is lovely.' by 'lovely' would be array('My ', ' string is ', '.'). You can then join this by your replace term (e.g. 'nasty') to make: 'My nasty string is nasty.' Splits and Joins can reproduce multiple search-replaces quite well. – Johno Mar 28 '12 at 15:45
  • hmmm, thanks for the explanation. I like that. Reason I been comment on all the replies is I was looking for a more elegant solution than Bogdan for my own thing, and this actually is more than I expected. – Churk Mar 28 '12 at 15:49
0

You by no means need jQuery to do this, but it's very difficult to give a good answer without knowing what you are doing. For example, "dog" and "boy" can appear within words. Do you want to replace those instances too, or just the full words? What if they are within attributes -- or are themselves attributes or elements? Is there some sort of priority?

That said, JavaScript String has no method to replace multiple words at once. You can chain the .replace, or you can implement something like:

String.prototype.replaceMulti = function (args) {
   for (var x = 0; x < args.length; x++) {
      this = this.replace(args.from, args.to);
   }
}

thePage.html(thePage.html().replaceMulti([{from: /dog/g, to: 'cat'}]);
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • with this example, isn't that over complicating things? He is not asking for multiple dog and replace with multiple cat, maybe he is, but more on dog to cat, boy to girl, etc... multiple replacements within 1 statement. – Churk Mar 28 '12 at 15:37
  • I don't understand how my solution is not "multiple replacements within 1 statement" – Explosion Pills Mar 28 '12 at 15:40
  • so you want the person to do this? thePage.html(thePage.html().replaceMulti([{from: /dog/g, to: 'cat'},{from: /boy/g, to: 'girl'},{from: /this/g, to: 'that'}]); what is the different between this and solution by Bogdan besides he is not extending the functionality of String – Churk Mar 28 '12 at 15:42
  • I didnt say u were wrong, I ask if this is cracking an egg open with a hammer – Churk Mar 28 '12 at 15:43
  • I was merely offering a different solution. My solution offers two things that Bogdan doesn't: reuse and no limit on input (Bogdan's requires you to write the method chains ahead of time). I don't think mine is more complicated but apparently you disagree. – Explosion Pills Mar 28 '12 at 15:48