Sometime ago, I was working on a piece of client-side code that needed to encode some data before invoking an Ajax request. Next, it needed to decode the response data.

While doing this, I experienced a nuance in JavaScript’s replace() function that required a little bit of effort in order for it to work with the degree of flexibility I needed.

My code was sending a variable-length query string of data to the server. The problem was that the ampersands were not being properly decoded on the server-side after the initial Ajax request.

I was storing the encoded representation of the ampersand in a local variable named _ampersand and had a function that accepted the full query string to be sent to the server, encode the data, perform some additional processing, and then return it.

Essentially, the function looked like this:

function encodedData(strInput) {
    // irrelevant code removed...
    return strInput.replace(/&/g, _ampersand);
}

This worked for sending the data across the wire, but decoding the response proved to be another challenge.

Because I was performing a global replacement of the ampersand token, I was using the ‘g’ operator to manage all occurrences but actually using the variable in the replace() function didn’t work as expected.

Originally, I was trying to do this:

// this does not work...
function restoreAmpersands(strInput) {
    return strInput.replace('/' + _ampersand + '/g', '&');
}

Trying to concatenate the /’s on the value stored in the _ampersand doesn’t work: replace() requires a regular expression to work its magic. Since JavaScript was casting the result of the concatenation as a string, it wasn’t working.

So, I first created a regular expression that included the _ampersand variable along with the global operator. Then I passed that particular regular expression into the replacement code:

var sRegExInput = new RegExp(_ampersand, 'g');
return strInput.replace(sRegExInput, '&');

And that took care of it. Easy enough.

Category:
Notes
Tags:

Join the conversation! 12 Comments

  1. Thanks, this helped a lot. I can’t believe I didn’t see this sooner.

  2. Awesome, thanks!
    Works great also in IE and saves me looooots of performance… :)

  3. I’ve been struggling the past two days trying to find a very efficient method of doing a bunch of replaces in a large amount of text. I tried about half a dozen different ways but couldn’t get one to consistently work across all browsers. RegEx can take forever when you need to do a lot of them and on a large amount of text. In fact, for me, even using the code example you are giving above would consistently crash all three browsers (IE, Chrome, Safari) every single time.

    But finally I stumbled upon the perfect solution. Lightning fast, works in all browsers, and one line of code:

    return strSourceString.split(strTextToFind).join(strTextToReplace);

  4. Brilliant, helped me out a lot, and on my first Google too. I was trying to replace window.host with ” (nothing) but as you say, the replace function expects either a regular expression or a string, not both.

    Cheers
    Jon

  5. I had the exact same issue…well using xml and not an ampersand issue, but this is great. Thank you very much.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.