如何替换图片中的某些单词 [英] How can I a replace certain word for an image

问题描述

我正在寻找一种方法来替换特定图片中的某些单词.例如:在我键入"logo_purple"一词的任何地方都需要显示特定的图像(logopurple.svg). "logo_white"，"logo_black"等的计数相同.

I'm looking for a way how I can replace certain words for a specific image. For example: where ever I typ the word 'logo_purple' needs to appear the a specific image (logopurple.svg). Same counts for 'logo_white', 'logo_black', etc.

做到这一点的最佳方法是什么?这些徽标可以出现在任何地方，但在标题中最常见.

What is the best way to do this? These logo's can appear everywhere, but are the most common in Titles.

如果php中有一个函数(我必须在functions.php中放些东西?这是一个Wordpress网站)可以实现此目的，那么我将在jQuery无法正常工作的情况下使用该函数.我更喜欢jQuery.

If there is a function in php (Something that I have to put in the functions.php? It's a Wordpress website) that can make this happen, I'll use that if jQuery won't work. I prefer jQuery.

谢谢.

我已经这样尝试过:但是由于某种原因，它破坏了toggleClass函数(我用来切换移动菜单的函数).

I've tried it like this: but for some reason, it breaks the toggleClass function (what I use for toggling my mobile menu).

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 )
  });

推荐答案

由于某种原因，它破坏了toggleClass函数

for some reason, it breaks the toggleClass function

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

When you use .html(html) it deletes all the existing html for that element which includes any corresponding events that had been wired to that html (eg menu).

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

Using $(body).html(.. is essentially the same as completely reloading the page, but without calling any javascript.

在您的情况下，您只需要定位包含文本的节点并替换该文本即可，您可以使用以下方法进行操作:

In your case you need to target just the node that has the text and replace just that text, which you can do with:

 $("*: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>

这篇关于如何替换图片中的某些单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！