Question

Is it a way to improve this infamous syntax… (with arrays)?

$("#rte").val(function(i, v) {
    return v.replace(':)','<img src="rte/icons/emoticon_happy.png" />')
});
$("#rte").val(function(i, v) {
    return v.replace(';)','<img src="rte/icons/emoticon_wink.png" />')
});

Answer 1

You can make this code way more extensible by supplying a dictionary for all of your smiles and looping through them:

var smileDict = {
  happy: ':)',
  wink:  ';)',
  sad:   ':(',
  cool:  'B)'
}

$('#rte').val(function(i, v) {
    for (var p in smileDict) {
        if (smileDict.hasOwnProperty(p)) {
            v = v.replace(smileDict[p], '<img src="rte/icons/emoticon_' + p + '.png" />');
        }
    }
    return v;
});

See example →

---

EDIT: To have this update a preview area like requested in the comments:

var smileDict = {
  happy: ':)',
  wink:  ';)',
  sad:   ':(',
  cool:  'B)'
};

var rteVal = $('#rte').val();

for (var p in smileDict) {
    if (smileDict.hasOwnProperty(p)) {
        rteVal = rteVal.replace(smileDict[p], '<img src="rte/icons/emoticon_' + p + '.png" />');
    }
}

$('#previewcontent').html(rteVal);