Javascript replace() removing one of the two special characters

Question

Replacing {t} in the variable var2, removes a '$' symbol from var1 and renders it as abc$abc instead of abc$$abc in the final result.

var var1 = 'abc$$abc';
var var2 = 'You are comparing {t} entity';
$('#div1').append('<div id="div2">' + var2.replace('{t}','<a href="' + var1 + '" target="_self">' + '</a>') + '</div>');

The closest questions I could find was Javascript append element with special characters, but even that couldn't address the problem.

Undoubtedly, I can check if the resultant string contains just one $ of two $s but i want to know if there is anything wrong with append above, as well as, if there is any generic way to achieve the result with the resultant string being restored with two $ signs.

This has nothing to do with `$.append()`, it can be demonstrated with simply `console.log("a".replace("a", "$$"));` — Smern, May 30 '14 at 13:03
Related: http://stackoverflow.com/questions/9423722/string-replace-weird-behavior-when-using-dollar-sign-as-replacement — Patrick Q, May 30 '14 at 13:05
You are right, but I don't understand why the two $s are being reduced to just one. Also, what if the string containing $$ is dynamic, in which case, writing a separate function just to perform another replace doesn't just make any sense. — , May 30 '14 at 13:06
@ronanmarsh, why not? You can also just fix the string just in time for the append replace... `...append(...var2.replace("{t}", ... var1.split("$").join("$$")..` — Smern, May 30 '14 at 14:36
@ronanmarsh, or if you do this in many places and you don't want to have to do this everytime, you could create your own `replaceEscapingDollars(str, find, replacement) { return str.replace(find, replacement.split("$").join("$$"));` — Smern, May 30 '14 at 14:46

score 1 · Answer 1 · answered May 30 '14 at 13:06

1

$$ is a replacement pattern in String.replace() which is always replaced by a single $. You need to double all dollar signs:

var var1 = 'abc$$abc'.replace( /\$/g, '$$$$' );

(Four dollar signs because again they act as replacement patterns.)

answered May 30 '14 at 13:06

JJJ

32,902
20
89
102

Smern · Accepted Answer · 2014-06-03T15:13:37.203

$ has special meaning in javascript string replace. When you use $$ you are basically escaping one of them. If you'd like two you can use four $$$$

To make your code work specifically, I think this would be about the most simple thing:

var var1 = 'abc$$abc'.split("$").join("$$");

JSFiddle

See here for details on $ in replace(): Mozilla docs

Figured I'd insert my comments here as well:

If you need to make sure this is done during the {t} replace (if the string may change after initialization) you can just throw it in like this:

$('#div1').append('<div id="div2">' + 
    var2.replace('{t}','<a href="' + 
        var1.split("$").join("$$") + 
        '" target="_self">' + '</a>')
+ '</div>');

or if this is something that needs to be done often in various places... you could create your own function for it... like:

function replaceEscapingDollars(str, find, replacement) { 
    return str.replace(find, replacement.split("$").join("$$"));
}

then your code would look like:

$('#div1').append('<div id="div2">' + 
    replaceEscapingDollars(var2, '{t}', '<a href="' + var1 + '" target="_self">' + '</a>') +
'</div>');

JSFiddle

But the simplest thing of all might be just to not use replace at all...

var2.split('{t}').join(var1)

JSFiddle

Javascript replace() removing one of the two special characters

2 Answers2