заменить определенный текст с изображением не работает

Question

Вот пример существующего HTML, я не уполномочен изменять

<a target="new" href="#">KCC&nbsp;26&nbsp;v&nbsp;MIN&nbsp;23</a>

Попытка добавить несколько значков НФЛ в названия имен аббревиатур для каждого

, поэтому я попробовал этопроверить текст KCC, найденный в любом месте на странице, но не работает. Есть идеи ? Так что я хотел бы оставить все существующие HTML одинаковыми, взять некоторые текстовые имена команд abbr и заменить на значок. В приведенном выше HTML я бы заменил KCC и MIN на 2 разных изображения.

$("*").filter(function() { return !$(this).children().length; })
      .html(function(index, old) { return old.replace('KCC', '<img ... />'); });

Answer 1

Попробуйте этот код https://jsfiddle.net/zn9fy1p6/1/

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  if (aTags[i].textContent.indexOf("KCC")>=0) {
       aTags[i].textContent = aTags[i].textContent.replace('KCC', '<img ... />');
  }
}

Если вы хотите заменить несколько подстрок, KCC одним изображением и MIN на другое изображение, то вам следует попробовать что-то, как показано ниже https://jsfiddle.net/doteLm39/

var mapObj = { 
  KCC:'<img ... />', //image-1
  MIN:'<img ... />' // image-2
};

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {       
  aTags[i].textContent = replaceAll(aTags[i].textContent, mapObj);
}

function replaceAll(str,mapObj){
  var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
  return str.replace(re, function(matched){
     return mapObj[matched];
  });
}