将 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>