Although deprecated, the escape('myString'); method will do the job and cater for both ? and ! symbols

It does actually. The replace function return a new string. Store new string into variable and change the src back.

var src;
var newStr;

src = $('#googlemap').attr('src');

newStr = src.replace('ø', '%C3%B8');

console.log(src);
console.log(newStr);

$('#googlemap').attr('src', newStr);

Did you tried the encodeURI

encodeURI - To encode an URL

encodeURIComponent - to encode the query string parameter

You could use the encodeURIComponent function which will properly URL encode the value.

Since version 1.5 (ECMA-262 3rd edition, December 1999) JavaScript supports the functions encodeURI() and encodeURIComponent() for exactly this job. I have no idea how you two guys could have overseen this.

See also the question Should I use encodeURI or encodeURIComponent for encoding URLs?

To be safe and ensure that you've escaped all the reserved characters specified in both RFC 1738 and RFC 3986 you should use a combination of encodeURIComponent, escape and a replace for the asterisk('*') like this:

encoded = encodeURIComponent( parm ).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");

[Explanation] While RFC 1738: Uniform Resource Locators (URL) specifies that the *, !, ', ( and ) characters may be left unencoded in the URL,

Thus, only alphanumerics, the special characters "$-_.+!*'(),", and reserved characters used for their reserved purposes may be used unencoded within a URL.

RFC 3986, pages 12-13, states that these special characters are reserved as sub-delimiters.

reserved = gen-delims / sub-delims

gen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@"

sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

The escape() function has been deprecated but can be used to URL encode the exclamation mark, single quote, left parenthesis and right parenthesis. And since there is some ambiguity on whether an asterisk must be encoded in a URL, and it doesn't hurt to encode, it you can explicitly encode is using something like the replace() function call. [Note that the escape() function is being passed as the second parameter to the first replace() function call. As used here, replace calls the escape() function once for each matched special character of !, ', ( or ), and escape merely returns the 'escape sequence' for that character back to replace, which reassembles any escaped characters with the other fragments.]

Also see 'https://stackoverflow.com/questions/6533561/urlencode-the-asterisk-star-character'

Also while some websites have even identified the asterkisk(*) as being a reserved character under RFC3986, they don't include it in their URL component encoding tool.

Unencoded URL parms:

parm1=this is a test of encoding !@#$%^&*()'
parm2=note that * is not encoded

Encoded URL parms:

parm1=this+is+a+test+of+encoding+%21%40%23%24%25%5E%26*%28%29%27
parm2=note+that+*+is+not+encodeds+not+encoded

Previous answer is correct. JavaScript has built in functions for fulfilling this kind of tasks.

You can try to investigate these functions in w3schools.com. Here are the links with basic information and live "Try it out" feature:

• encodeURI - takes string with your characters and encodes it into plausible for url style ( encoding spaces and non ANSII chars )
• decodeURI - takes encoded string and decodes it to initial state

Correct regex to use here would be /[()"]*/g instead of '/[")(]/g'

Syntax : RegExp['$&']

Description : The lastMatch property is static, it is not a property of an individual regular expression object. Instead, you always use it as RegExp.lastMatch or RegExp['$&'].

So please not that you have $& in your string and you use it in replace function that use regex expresions :

template = template.replace(/\{\{image_thumb\}\}/g, url);

So the $& in your string will be translated to lastMatch property that will print {{image_thumb}} instead of $&, That why you get :

<img class="thumb-img" src="http://s7d3.scene7.com/is/image/LuxotticaRetail/8053672035704_shad_fr?$jpegdefault{{image_thumb}}wid=45">

Simple example :

var url = "http://s7d3.scene7.com/is/image/LuxotticaRetail/8053672035704_shad_fr?$jpegdefault$&wid=45"
var template = '<img class="thumb-img" src="{{image_thumb}}">';

template = template.replace(/\{\{image_thumb\}\}/g, 'some $& text');

console.log(template);

//will return
<img class="thumb-img" src="some {{image_thumb}} text">

So you have to eliminate the expression $& from your url.

Source

Hope this helps.