將 JavaScript 中所有出現的字符串替換為 firefox 擴展的圖像

Question

我想將某些字符串的每次出現更改為它對應的圖像。

例子：

前：

bla bla bla 橙色 bla bla

后：

例如，bla bla（橙色圖像）為 56px x 56px。

Replace() 使用字符串到字符串，我認為您不能將它用於圖像。

非常感謝您的時間，我希望它不是重復的（我在寫這篇文章之前搜索了 2 小時）

這可以用作參考： https : //github.com/mdn/webextensions-examples/tree/master/emoji-substitution

（我不是想做表情符號而是圖片）

Answer 1

如果你想用表情符號（比如🍊）替換，你不需要做任何特別的事情——那仍然只是文本。 但是，如果您想使用實際圖像，您仍然可以使用String.replace() 。 您只需替換為 HTML 並將整個字符串傳遞給類似Element.innerHTML 。 換句話說，“orange” 將被替換為<img class="icon" src="https://..." alt="Orange" /> 。 例如：

 const replaceImages = str => Object.entries({ orange: { src: 'https://www.flaticon.com/svg/static/icons/svg/167/167265.svg', alt: 'Orange', }, // ...add more replacements here... }).reduce( (result, [key, {src, alt}]) => result.replace(key, `<img src="${src}" alt="${alt}" class="icon" />`), str ) document.querySelector('.js-container').innerHTML = replaceImages('bla bla bla orange bla bla')

 .icon { height: 1em; }

 <div class="js-container"></div>