JavaScript regex with URL activation along with smilies and more

Question

I'm converting my PHP code for replacing smiley codes with images, activating links and a few other things to JavaScript.

Separately the functions work well, but together I'm getting the same problem as this. I think that this method is a bit overkill, I've used the following regex in PHP and it avoided conflicting with activated links

loop..
$message = preg_replace('#(?<!\w)'.$smiley.'(?!\w)#i', '<img src="images/smilies/'.$img.'" class="smiley" />', $message);
endloop

Is there any way to convert this regex to JavaScript valid rules? Thanks

Edit to clarify what/how I'm doing:

var input = 'HellO! :* :P ;P :-( http://google.com www.google.com';

//input = input.replace(/(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%‌=~_|])/ig,'<a href="$1">$1</a>'); 

var smilies = {
    'sad.png':      [':\(', ':-\('],
    'kiss.png':     [':\*', ':-\*', ';\*', ';-\*'],
    'tongue.png':   [':P', ':-P', ';P', ';-P']
};

for(var smiley in smilies) {
    input = input.replace(new RegExp(smilies[smiley].join('|'), "gi"), '<img src="images/smilies/'+ smiley +'" class="smiley" />');
}

console.log(input);

anubhava · Answer 1 · 2013-11-22T14:54:55.057

1

Javascript doesn't support lookbehind so what you can do is to look for word boundary instead. Consider this code:

var re = new RegExp('\\b' + smiley + '(?!\\w)', 'gi');
message = message.replace(re, '<img src="images/smilies/' + img + '" class="smiley" />');

UPDATE:

Leaving input untouched, you can have your for loop like this which escapes every special character in input match:

for(var smiley in smilies) {
    input = input.replace(new RegExp(smilies[smiley].join('|')
       .replace(/[*()$]/g, '\\$&'), "gi"),
          '<img src="images/smilies/'+ smiley +'" class="smiley" />');
}

OUTPUT:

"HellO! <img src="images/smilies/kiss.png" class="smiley" /> <img src="images/smilies/tongue.png" class="smiley" /> <img src="images/smilies/tongue.png" class="smiley" /> <img src="images/smilies/sad.png" class="smiley" /> http://google.com www.google.com"

edited Nov 22 '13 at 14:54

answered Nov 22 '13 at 13:01

anubhava

761,203
64
569
643

I'm using an arrays like `[':S', ':-S', ':-/', ':/']` for triggering the replacement and right now the regexp looks like this `input = input.replace(new RegExp(smilies[smiley].join('|'), "gi"), '');` Adding your proposed method doesn't replace anything at all.. – Matt Nov 22 '13 at 13:05
If you provide a sample of you input text and expected output in your question I can suggest you proper code. My answer is purely based on your 1 liner PHP code. – anubhava Nov 22 '13 at 13:08
Hm for me it doesn't replace the first and last emotions. Also it replaces every space with the `:|` emotion if I don't comment it out. – Matt Nov 22 '13 at 13:38
The problem is not smiley replacement with images, it's not getting in the way of URLs. That thread has nothing to due with this problem. – Matt Nov 22 '13 at 13:45
@Matt: With your sample input are you not seeing the output as I posted above? If you have different input data please provide some samples and I will enhance my code further. – anubhava Nov 22 '13 at 14:01
I'm using the exact same input. I do have more emotions, like `$)`, `B)` I just didn't copy all of them as there are over ~50. Maybe they are getting in the way?... – Matt Nov 22 '13 at 14:12
Yes that might be the reason. Let me simplify the code and then you can try it out. – anubhava Nov 22 '13 at 14:54
`SyntaxError: unmatched ) in regular expression .replace(/[*()$]/g, '\\$&'), "gi"),` – Matt Nov 22 '13 at 14:59

JavaScript regex with URL activation along with smilies and more

1 Answers1

UPDATE:

OUTPUT: