caner taşdemir caner taşdemir - 1 month ago 11
Javascript Question

jQuery - Why it doesn't replace correctly if I run multiple replace checks?

I am replacing smile character like

:)
to images. If I use only

var yorum4 = "hello :)";
yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>");


It replaces correctly. However, when I use this for multiple replaces,

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='smile.png' \/>");
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='smile1.png' \/>");
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='smile2.png' \/>");


It corrupts and output like

<img src="http<img class="


What is the correct way to replace multiple smiles ?

Edit: here is the full list

yorum4 = yorum4.replace(/(:\))/g, "<img class='smileys' src='i.png' \/>");
yorum4 = yorum4.replace(/(;\))/g, "<img class='smileys' src='j.png' \/>");
yorum4 = yorum4.replace(/(:\p)/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/(:\P)/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/(:\D)/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/(:\d)/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/(:'\()/g, "<img class='smileys' src='d.png' \/>");
yorum4 = yorum4.replace(/(:\*)/g, "<img class='smileys' src='a.png' \/>");
yorum4 = yorum4.replace(/(<\3)/g, "<img class='smileys' src='f.png' \/>");
yorum4 = yorum4.replace(/(:\o)/g, "<img class='smileys' src='he.png' \/>");
yorum4 = yorum4.replace(/(:\O)/g, "<img class='smileys' src='e.png' \/>");
yorum4 = yorum4.replace(/(:\()/g, "<img class='smileys' src='s.png' \/>");

Answer

Your /:\D/ pattern matches a colon and any non-digit symbol and can thus match a :/ inside a protocol part of an URL.

If you meant a :D smiley, just use /:D/. Same goes for all the literal letters and digits: do not escape them. Also, there is no point using capturing groups around whole patterns, if you need to reference the match values in the replacement pattern, just use $& (not $1).

var yorum4 = "hello :)";
yorum4 = yorum4.replace(/:\)/g, "<img class='smileys' src='i.png' \/>");
yorum4 = yorum4.replace(/;\)/g, "<img class='smileys' src='j.png' \/>");
yorum4 = yorum4.replace(/:p/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/:P/g, "<img class='smileys' src='b.png' \/>");
yorum4 = yorum4.replace(/:D/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/:d/g, "<img class='smileys' src='c.png' \/>");
yorum4 = yorum4.replace(/:'\(/g, "<img class='smileys' src='d.png' \/>");
yorum4 = yorum4.replace(/:\*/g, "<img class='smileys' src='a.png' \/>");
yorum4 = yorum4.replace(/<3/g, "<img class='smileys' src='f.png' \/>");
yorum4 = yorum4.replace(/:o/g, "<img class='smileys' src='he.png' \/>");
yorum4 = yorum4.replace(/:O/g, "<img class='smileys' src='e.png' \/>");
yorum4 = yorum4.replace(/:\(/g, "<img class='smileys' src='s.png' \/>");
console.log(yorum4);

Another hint: you might want to use word boundaries and non-word boundaries, like /\B:\)\B/ or /\B:D\b/ (adding non-word boundary \B before/after non-word chars and word boundaries \b before/after word chars) to match these smileys as "whole words", but it is difficult to say without the actual data.