Замена нескольких строк изображениями в Javascript

Question

В настоящее время у меня есть 54 значки изображений, и на более поздних этапах у меня будет более 200 значков изображений, которые потребуются для replace различных strings на всей странице html. Во всех случаях эти strings будут encased in {}. Пример

{A}, 
{B}, 
{C},
{ABC},
{DEF}, 
{1},
{2},
{34},
etc. 

Пока это все, что я придумал, это работает, но применяется только индивидуально.

<script>
   var link = '<img src="path_to_IMG" height="15px" width="15px">';
$("body").children().each(function () {
$(this).html( $(this).html().replace(/{B}/g, link) );
});         
</script>   

Я бы хотел, чтобы скрипт циклически перебирал все случаи, динамически изменяя path_to_IMG и заменяя строку ссылкой на изображение. Пожалуйста, извините, я очень новичок в Javascript, поэтому мой пример ниже показывает элементы, как если бы они были частично PHP. Этот сценарий будет постоянно развиваться, так как новые значки и пути к этим значкам будут постоянно добавляться со временем.

<script>
   $path    = 'website.com/images/';
   $img_loc = 'IMG_GENERIC.png';
   $link    = '<img src=".$path.$img_loc." alt="symbol" height="15px" width="15px" />';

   $("body").children().each(function () 
    {
      case('{A}'):
            $img_loc = 'IMG_A.png';
            $(this).html( $(this).html().replace(/{A}/g, link) );
      case('{B}'):
             $img_loc = 'IMG_B.png';
            $(this).html( $(this).html().replace(/{B}/g, link) );
    });         
</script>   

Answer 1

Я бы начал с массива объектов, описывающих поиск и замену строк, и перебрал его, чтобы выполнить поиск и замену. Вот минимальный пример.

let searchAndReplace = [
  { search: "{A}", replace: "path-to-image-a.png"},
  { search: "{B}", replace: "path-to-image-b.png"}
];

for(let s of searchAndReplace) {
  document.body.innerHTML = document.body.innerHTML.replace(s.search, s.replace);
}

Конечно, вы можете динамически заполнить этот массив PHP.

Вы также можете использовать регулярные выражения для поискового запроса.

var searchAndReplace = [
  { search: /{A}/g, replace: "path-to-image-a.png"},
  { search: /{B}/g, replace: "path-to-image-b.png"}
];