在jquery中用图像更改文本答案

【问题标题】：Change text with image in jquery在jquery中用图像更改文本
【发布时间】：2022-11-13 23:31:01
【问题描述】：

我有一些 jQuery 代码：

jQuery('.lang-in-serach-blg').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('English','<img src="flags/24/en.png">');
});

我想用图像替换我想要的文本，但此代码显示图像 URL 而不是替换图像。我应该怎么办？

我还需要这个来处理多个替换。例如，我想用一个标志替换“English”，然后我想用另一个标志替换“Francais”。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

为了添加<img> 标签，您必须使用.innerHTML。您可以将代码简化为：

$('.lang-in-serach-blg').each(function() {
  this.innerHTML = this.innerHTML.replaceAll('English', '<img src="https://placekitten.com/50/50">');
});

$('.lang-in-serach-blg').each(function() {
  this.innerHTML = this.innerHTML.replaceAll('Francais', '<img src="https://placekitten.com/60/60">');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="lang-in-serach-blg">
  English filler text filler text English.
</p>

<p class="lang-in-serach-blg">
  English filler text filler text English.
</p>

<p class="lang-in-serach-blg">
  Francais filler text filler text Francais.
</p>

如果您在 DOM 加载后更改网页的内容，那么您应该在 DOM 更改后再次运行此代码。如果您要使用一个为您处理状态的框架（即：React、Vue、Svelte 等），那么该框架会为您处理这些，但对于纯 jQuery，您需要自己完成。

【讨论】：

@Pudy我已经更新了我的答案，它现在可以工作了。如果这解决了您的问题，那么您应该将其标记为正确（复选标记），以帮助指导其他人将来遇到同样的问题。
我在一个有多个页面的站点中使用此代码，第 2、3 等页面在 Ajax 中加载。当我打开网站（第一页）时，这段代码工作正常，但当我加载后续页面（在 Ajax 中）时，代码停止工作。我需要改变什么吗？我开始我的代码： jQuery(document).ready(function( $ ){
@Pudy 如果您正在动态更改页面内容，那么您应该再次运行我的答案中的代码。一个简单的方法是将我的答案中的所有代码放在一个函数中。然后，您可以在jQuery(document).ready 中调用此函数，然后在更新页面时再次调用。