jquery - jQuery-将多个单词更改为多个图像

我有一个div，上面写有一些平台，我想让jQuery用匹配的图像替换每个单词。 Android将成为android图标，PS4将成为PS4图标，等等。

HTML不是列表，并且多个文本字符串在一个div内。

$(".field-content").each(function() {
  if ($(this).children().length == 0) {
    var newHTML = $(this).html().replace('Firefox', '<img class="markdown-img" src="index.php?/attachments/get/6049" alt="" width="40">');
    $(this).html(newHTML);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-content">Xbox , Android, Chrome, Firefox</div>

发生的是，如果jQuery运行，它将用图像替换整个div，并且找不到要替换的多个单词/图像。

知道如何运行它以用图标替换Xbox以及如果PS4也存在时，如何用图标替换PS4？

最佳答案

你的意思是这样的吗？ div的子代中没有HTML。这是一个文本字符串

var imgs = {
    "Xbox": "https://findicons.com/files/icons/382/console/128/xbox_360_zoomed_icon.png",
    "Android": "http://i.istockimg.com/file_thumbview_approve/25435190/3/stock-photo-25435190-green-android-with-shoping-bag.jpg",
    "Chrome": "chrome.gif",
    "Firefox": "firefox.gif",
    "PS4": "ps4.gif"
  }
$(".field-content").each(function() {
  var newHTML = [];
  $.each(
    $(this).text().split(","), // you were for sure missing this
    function(_, val) {
      val = $.trim(val);
      if (val.length > 0) {
        newHTML.push(val + ': <img class="markdown-img" src="' + imgs[val] + '" alt="Image of '+val+'">');
      }
    }
  );
  //    console.log(newHTML)
  if (newHTML.length > 0) $(this).html(newHTML.join("&nbsp"));
})

.markdown-img { width:40px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-content">Xbox , Android, Chrome, Firefox</div>
<div class="field-content">Android, Chrome, PS4</div>