Question

I try to replace some specials characters (emojis) based on a replacement map.
I wrote this piece of code but it still not work..

var char_map = {
    '■': 'e',
    '­♥': 'a',
    '♦': 'm',
};

$.fn.map_replace = function() {
    $(this).html(function(i, content) {
        $.each(char_map, function(key, value) {
            content = content.replace(key, value);
        });
        return content;
    });
};

$(".comment").map_replace();

This code on jsFiddle

Thanks for helping 🙂

Answer 1

One way to do this would be to use escape codes instead of literal Unicode characters, and replace them using regular expressions:

var char_map = {
    'e' : /\u25A0/g,
    'a' : /\u2665/g,
    'm' : /\u2666/g,
};

$.fn.map_replace = function() {
    $(this).html(function(i, content) {
        $.each(char_map, function(character, regex) {
            content = content.replace(regex, character);
        });
        return content;
    });
};

$(".comment").map_replace();

Updated jsFiddle

The reason your initial approach didn’t work is that by default String.replace() only replaces the first occurrence of the search expression. By using a regex and specifying the “g” (for “global”) flag, you can tell it to replace all matches.