O'Reilly

Replace All Occurrences of a String in JavaScript

By on  

One thing you may have noticed is that JavaScript's String.replace() method doesn't act like replacement methods in other languages. Take the following for example:

var replaced = 'The MooTools JavaScript library is is great.  I have never loved any code as I have MooTools!'.replace('MooTools','MooTools FTW!');

The above code will only replace the first occurrence of "MooTools" -- not every occurrence like PHP's str_replace() would. To replace every occurrence of a string in JavaScript, you must provide the replace() method a regular expression with a global modifier as the first parameter:

var replaced = 'The MooTools JavaScript library is is great.  I have never loved any code as I have MooTools!'.replace(/MooTools/g,'MooTools FTW!');

Remember that you must escape special characters within your regular expression. And oh -- how convenient! MooTools provides a method that will do that for you!

Track.js Error Reporting

Recent Features

  • Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

  • NSFW Blocker Using MooTools and CSS

    One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away. Since...

Discussion

  1. Richard

    I had this issue before, didn’t knew the answer was so simple. Out of frusteration I actually used php.js because I couldn’t figure it out. Thnx man.

  2. Jay

    FTR, JS’s replace function DOES act like replace functions in other languages, just perhaps not the ones you’re expecting it to.

    It doesn’t work like str_replace in PHP, but it is very similar to preg_replace.

    As long as developers are aware that .replace is a regular expression replacement method, I think it’s pretty straightforward.

    http://www.w3schools.com/jsref/jsref_replace.asp

    It should also be noted that one can create a regular expression using something like:

    var regex = new RegExp('MooTools', 'g');
    

    And that regular expression can be used in the replace function (first parameter). Which is helpful if you ever want to use the contents of a variable in your replacement:

    http://tommcfarlin.com/2008/03/11/using-local-variables-with-javascripts-replace-function/

    Don’t forget to escape!

  3. “.replace is a regular expression replacement method” (@Jay)

    I think that’s quite misleading. From what you’ve said one would assume that the replace-method’s first argument is converted to a regular expression implicitly when in fact, if you pass a string, it’s treated as literal text and is not converted to a RegExp object.

    Also, just to clarify, /regex/ is the same as RegExp(‘regex’) – which, btw, doesn’t require the new operator.

  4. David, just a question, whats the name of comments system that you had? WDC or something like that. Thx

  5. elron

    can it replace the page itself?
    i mean, insted of ““, it will write ““,
    or insted if “<iframe>”, it will write “” (“<” is “<")
    waiting for a response.
    thanks!

  6. Yang

    Could you tell me what is code to create the copy to clipboard button, please?

  7. also have this problem. thanks for your perfect method.
    I use replace(/\+/g, ‘ ‘) replace “+” to space

  8. gadget

    Here is another article about javascript replace you people might be interested @

    http://gadgets-code.com/javascript-replace-method-review

    :)

  9. jonathan

    thanks fir that simple but super usefull tip

  10. Abhishek

    use ‘gi’ in place of ‘g’ to replace the string irrespective case, i.e to replace for insenstive case.

  11. quote -replace(/\+/g, ‘ ‘) replace “+” to space”-unquote worked like a charm! for decodeURIComponent after banging my head for two hours!

    //on serverside
    server.encode(uri) 
    //on client side
    var str = decodeURIComponent(uri);
    str.Replace(/\+/g,' ');
    
  12. Pragya Shukla

    Thanks David. It helps me a lot.

  13. newCats = ['lions', 'leopards', 'cats'];
    console.log( newCats.toString().replace(',',', ','g') );
    

    lions, leopards, cats /* and not lions,leopards,cats */

    no need for // in the regex argument if it’s a simple expression.

  14. Pathiv

    Thanks mate….it worked for me….

  15. Thanks David. Works for me!

  16. Leandrom

    thank you!

  17. Bhushan

    Hi
    I need to replace the break in the string. I’m writing each character using plus so that you can unserstand.
    ”. Remove all the + from above string, and i need to replace that string within another string.
    Can you please tell me how to do it ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...