Как вывести картинку от слова на js?

Question

[fansik]

На страницу будут выводиться слова из фильтра.
Как сделать так, чтоб вместо слов выводилась иконка?

Есть слова к примеру:
Вода,свет,интернет

Нужно по итогу добиться до такого:


Нашел такой скрипт, но что то не работает...

let textfield = document.querySelector('p');
let sourceText = textfield.innerText;

let map = {
 'Холодильник': 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/facebook/158/sun-with-face_1f31e.png',
 'Чайник': 'https://sun1-21.userapi.com/c841121/v841121754/60829/AWOAkeCvm3s.jpg?ava=1'
};

const replace = (text, map) => Object.keys(map).reduce((result, key) => {
 let pattern = new RegExp(`${key}`, 'g');
 let value = map[key];
 
 let img = `<img src="${value}" />`;
 
 return result.replace( pattern, img );
}, text);

let html = replace(sourceText,map);
textfield.innerHTML = html;</script>
<script>$('noindex').html(function(){return $(this).html().replace(/,/g, "")});

Вот так выглядит сам код...

<p class="tagster">Телевизор, Холодильник, Кондиционер, Интернет, Чайник, Вода, Завтрак</p>

Comments

[Eugene Chefranov]

вам же вчера подсказывали

[fansik]

Eugene Chefranov, не подошло

Answer 1

[Игорь]

Без спрайтов, так:


Со спрайтами, так (не все ровно потому что спрайт кривой):

Использовал такой спрайт

Comments

[fansik]

У меня большое количество иконок в картинке. Можно ли как то модернизировать через стиль указывая позицию?

[Игорь]

fansik, Обновил ответ

Answer 2

[Дима Долготер]