JavaScript RegEx Smilies

Question

Okay so I'm trying to make a smilie array, problem is that it's going to be in JavaScript and I get errors because of wierd chars.

Here's my error: [17:14:57.025] SyntaxError: unterminated parenthetical Here's the code line:

var smiley_array = [':)',';)',':P',':D',':O',':(',':\'(',':|',':/',':$',':@','(A)','3:)',':cool:',':*',':lol:',':z'];

I know that in some places there must be a Backslash before the character and I've been trying with everything I can think of.

Thanks.

EDIT:

var smiley_array = [':)',';)',':P',':D',':O',':(',':\'(',':|',':/',':$',':@','(A)','3:)',':cool:',':*',':lol:',':z'];
var smiley_xhtml = ['smile','wink','raspberry','big_smile','surprise','sad','crying','plain','worried','embarrassed','angry','angel','devil','cool','kiss','laugh','tired'];

function smilies(text) {
    for (var i = 0; i< smiley_array.length; i++) {
        word = smiley_array[i].replace(")","\\)");
        word = new RegExp(word, "g");
        var smiley_img = '<img style="margin-bottom: -3px;" height="20px" width="20px" src="<?php echo $this->x7->smilie_url; ?>' + smiley_xhtml[i] + '.png" />';    
        text = text.replace(word, smiley_img);
    }
return text;
}

Note that there's Nothing wrong with the Function it self, I've tryed it with only 1 simple smilie in the array.

This snippet of code works fine. Please show the rest of it. — Guilherme Sehn, Nov 09 '13 at 16:19

score 1 · Answer 1 · answered Nov 09 '13 at 16:34

You can transform your array into a regex as follows:

var smiley_array = [':)',';)',':P',':D',':O',':(',':\'(',':|',':/',':$',':@','(A)','3:)',':cool:',':*',':lol:',':z'];

for(var i = 0; i < smiley_array.length; i++){
    smiley_array[i] = smiley_array[i].replace(/([)(*|$])/g, '\\$1'); //This will add backslashes before ), (, *, |, and $
}
var regex = new RegExp(smiley_array.join('|'), 'g');

And then apply it to text like so:

var test = 'Lorem ipsum :) dolor sit ;) amet, consectetur :P adipiscing :D elit :O. Integer :( ac urna ultrices, :\'( tincidunt :| lectus :$ suscipit, :cool: sagittis :@ tortor. (A) Donec eu 3:) metus :/ aliquam :lol: velit :* elementum :z pulvinar';

console.log(test.match(regex));

score 1 · Answer 2 · answered Nov 09 '13 at 16:37

Use this code to quote special regex characters in your smiley array:

string = string.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");

Your full code:

var smiley_array = [':)',';)',':P',':D',':O',':(',':\'(',':|',':/',':$',':@','(A)','3:)',':cool:',':*',':lol:',':z'];
var smiley_xhtml = ['smile','wink','raspberry','big_smile','surprise','sad','crying','plain','worried','embarrassed','angry','angel','devil','cool','kiss','laugh','tired'];

function smilies(text) {
    for (var i = 0; i< smiley_array.length; i++) {
        str = smiley_array[i].replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
        word = new RegExp(word, "g");
        var smiley_img = '<img style="margin-bottom: -3px;" height="20px" width="20px" src="<?php echo $this->x7->smilie_url; ?>' + smiley_xhtml[i] + '.png" />';    
        text = text.replace(word, smiley_img);
    }
    return text;
}

@user2965339: I am on mobile at present, as soon as I get back to my computer I will test this out and try to provide you a working code. — anubhava, Nov 09 '13 at 16:59

score 0 · Accepted Answer · edited May 23 '17 at 12:21

There are more special characters other than ( which need to be escaped before you add them in your regular expression.

There is already a question here in Stack Overflow about how to escape these characters before sending them to a regex, you can see it here: Escape string for use in Javascript regex

I adapted your smilies function to use the function that was provided in the question I referred above.

function smilies(text) {
    for (var i = 0; i< smiley_array.length; i++) {
        var word = new RegExp(escapeRegExp(smiley_array[i]), "g");
        var smiley_img = '<img style="margin-bottom: -3px;" height="20px" width="20px" src="<?php echo $this->x7->smilie_url; ?>' + smiley_xhtml[i] + '.png" />';

        text = text.replace(word, smiley_img);
    }

    return text;
}

I've also added the var keyword before your word function otherwise it will be available in the global namespace, which is not a good thing (suggested reading: What is the purpose of the var keyword and when to use it (or omit it)?).

Fiddle: http://jsfiddle.net/d9X4P/

score 0 · Answer 4 · answered Nov 09 '13 at 17:14

I know, I'm off-topic, it's just for the sake of sharing :$

var smilies = { 
    smile: /:\)/g, 
    bigsmile: /:D/g, 
    worried: /:\//g 
};

var txt = ':) :D :) :/';
for (var k in smilies) {
    txt = txt.replace(smilies[k], k);
}
txt; // "smile bigsmile smile worried"

JavaScript RegEx Smilies

4 Answers4