0

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.

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.

Thanks in advance.

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

1 Answers1

0

for some reason, it breaks the toggleClass function

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).

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")

(ref: https://stackoverflow.com/a/927013/2181514)

Giving:

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>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • Thank you! It works! I also found out if I replace "body" with "div" or "article", it also doesn't intervene with the toggleClass, but your solution is way cleaner! Again sorry for my lack of knowledge of jQuery, I only use t for the "basic" stuff. –  Oct 01 '19 at 08:29
  • You could have also targeted your replacements, eg `
    ` then `$(".hasreplacements")...` but it would mean you'd need to know up-front where the replacements would be.
     – freedomn-m Oct 01 '19 at 08:32
  • Yeah I know where they are, yet there are multiple targets. So I generalized them with "body". –  Oct 01 '19 at 08:52