如何替换图像的某些单词

Question

我正在寻找一种方法来替换特定图像的某些单词。例如：在我输入“logo_purple”这个词的地方需要出现一个特定的图像（logopurple.svg）。 “logo_white”、“logo_black”等的计数相同。

最好的方法是什么？这些标志可以出现在任何地方，但在标题中最常见。

如果 php 中有一个函数（我必须在 functions.php 中添加的东西？这是一个 Wordpress 网站）可以实现这一点，如果 jQuery 不起作用，我会使用它。我更喜欢 jQuery。

提前致谢。

我试过这样：但由于某种原因，它破坏了 toggleClass 功能（我用来切换移动菜单的功能）。

var purple = "<img src='assets/images/logopaars.svg' />";

  $("body:contains('zijn_paars')").html(function (_, html) {
       return html.replace(/zijn_paars/g , purple )
  });

  var white = "<img src='assets/images/logowit.svg' />";
  $("body:contains('zijn_wit')").html(function (_, html) {
       return html.replace(/zijn_wit/g , white )
  });

  var black = "<img src='assets/images/logozwart.svg' />";
  $("body:contains('zijn_zwart')").html(function (_, html) {
       return html.replace(/zijn_zwart/g , black )
  });

  var pink = "<img src='assets/images/logoroze.svg' />";
  $("body:contains('zijn_wit')").html(function (_, html) {
       return html.replace(/zijn_roze/g , pink )
  });

Answer 1

由于某种原因，它破坏了 toggleClass 功能

当您使用.html(html) 时，它会删除该元素的所有现有html，其中包括已连接到该html 的任何相应事件（例如菜单）。

使用$(body).html(..本质上与完全重新加载页面相同，但不调用任何javascript。

在您的情况下，您只需要定位具有文本的节点并仅替换该文本，您可以这样做：

 $("*:contains(" + text + "):last")

（参考：https://stackoverflow.com/a/927013/2181514）

给予：

function replaceImg(searchString, htmlString) {
  var expr = new RegExp(searchString, "gi");
  $("li:contains(" + searchString + ")").html(function(i, html) {
    return html.replace(expr, htmlString)
  })
}

replaceImg("purple", "<img src='purple.jpg'/>")
replaceImg("red", "<img src='red.jpg'/>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Some purple text</li>
    <li>Some red text and more red text</li>
    <li>second purple text</li>
  </ul>
</div>