使用jQuery改进val替换

Question

这是改善这种臭名昭着的语法的方法......（使用数组）？

$("#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

通过为所有微笑提供字典并循环遍历，您可以使此代码更具可扩展性：

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 →

---

编辑：要将此更新更新为评论中所请求的预览区域：

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);

Answer 2

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