CODEWITHSUNDEEP
javascriptregex
user3702384
user3702384

Reputation: 59

How to convert emoticons within text with RegEx?

The following regex works in all but one case.

If I start a text with ":-)" the emoticon should be converted and it is not. What do i have to add to make this possible?

    // :-O :O :-o :o

    _message = _message.replace(/\s:-?[Oo]\s/g, '<i class="icon-emoji-freaked-mini"></i>');

    // :-) :)

    _message = _message.replace(/\s:-?\)\s/g, '<i class="icon-emoji-smile-mini"></i>');

    // :-D :D

    _message = _message.replace(/\s:-?D\s/g, '<i class="icon-emoji-laugh-mini"></i>');

    // :-( :(

    _message = _message.replace(/\s:-?\(\s/g, '<i class="icon-emoji-sad-mini"></i>');

    // ;-) ;)

    _message = _message.replace(/\s;-?\)\s/g, '<i class="icon-emoji-wink-mini"></i>');

    // :-/ :/ :-| :|      excluded: :-// ://  (URLs)

    _message = _message.replace(/\s:-?[\/\|](?!\/)\s/g, '<i class="icon-emoji-well-mini"></i>');

Upvotes: 1

Views: 243

Answers (1)

Regular Jo
Regular Jo

Reputation: 5510

You can use ^ to anchor to the start of the string (It has this meaning when it is outside square brackets). So we say <start of string or following a whitespace character>

We can also do similar with $ and anchoring to the end of the string.

// :-O :O :-o :o

_message = _message.replace(/(^|\s):-?[Oo](\s|$)/g, '<i class="icon-emoji-freaked-mini"></i>');

// :-) :)

_message = _message.replace(/(^|\s):-?\)(\s|$)/g, '<i class="icon-emoji-smile-mini"></i>');

// :-D :D

_message = _message.replace(/(^|\s):-?D(\s|$)/g, '<i class="icon-emoji-laugh-mini"></i>');

// :-( :(

_message = _message.replace(/(^|\s):-?\((\s|$)/g, '<i class="icon-emoji-sad-mini"></i>');

// ;-) ;)

_message = _message.replace(/(^|\s);-?\)(\s|$)/g, '<i class="icon-emoji-wink-mini"></i>');

// :-/ :/ :-| :|      excluded: :-// ://  (URLs)

_message = _message.replace(/(^|\s):-?[\/\|](?!\/)(\s|$)/g, '<i class="icon-emoji-well-mini"></i>');

Additionally, as Casimir says, you can do something like this, taking advantage of the fact that as long as it begins with letter, _, or $, a javascript variable may contain almost any character.

_message = "He Loves me :), he loves me not. :(";

var Smiles = {"e:-O": "freaked-mini","e:O": "freaked-mini","e:-)": "smile-mini","e:)": "smile-mini","e:-D": "laugh-mini","e:D": "laugh-mini","e:-(": "laugh-mini","e:(": "laugh-mini","e;-)": "wink-mini","e;)": "wink-mini","e:-\\": "well-mini","e:\\": "well-mini","e:-\|": "well-mini","e:\|": "well-mini"}

_message = _message.replace(/(?:^|\s)(:-?[Oo]|:-?\)|:-?\(|:-?D|s:-?|;-?\)|:-?[\/\|](?!\/))(?=\s|$)/g,function (match,p1) {
        return '<i class="icon-emoji-' + Smiles["e" + p1] + '></i>';
    });

console.log(_message);

One problem I encountered, no matter which code styling is that it will not catch an emoticon followed immediately by a punctuation mark and that makes me sad :(..

There's an easy fix though, we'll change (?=\s|$) to (?=\s|$|\.|,|\?|\!). And that makes me happy<i class="icon-emoji-smile-mini></i>.

_message = _message.replace(/(?:^|\s)(:-?[Oo]|:-?\)|:-?\(|:-?D|s:-?|;-?\)|:-?[\/\|](?!\/))(?=\s|$|\.|,|\?|\!)/g,function (match,p1) {
        return '<i class="icon-emoji-' + Smiles["e" + p1] + '></i>';
    });

console.log(_message);

Upvotes: 1

Related Questions