Как я могу заменить определенное слово для изображения

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

(ref: 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>