Exchange text in icon according to text

Question

<div class="modeloProduto">
<p>Massa Muscular</p>"
</div>

I don’t know much about site programming but I’m making a site with what I know, I wanted a script that changes the "Muscle Mass" to an icon

like this, if it says "Muscle Mass" an icon of an arm appears, if it says "Lose weight" a scale appears instead of the text

the site is this -> https://www.standsuplementos.com/

I do not have access to HTML so I need to do everything via script to add something on the site, I thank you already!

Answer 1

Apparently you are very limited so I’ve used everything in the simplest way possible, let’s understand the code.

tags : There goes the element you want the code to verify

searchText : Text to be found

for simply scans all objects found by the tagname and compare their text, if it is the same it replaces the html of the element with an image, modify as needed, it is worth remembering that if Voce has in mind the exact place is only modify the code for a getElementById avoiding so!

var tags = document.getElementsByTagName("p");
var searchText = "Massa Muscular";

for (var i = 0; i < tags.length; i++) {
  if (tags[i].textContent == searchText) {
    tags[i].innerHTML = '<img src="https://purepng.com/public/uploads/large/purepng.com-musclemusclemuscle-manbody-builderssix-packmuscle-boysclipartmuscle-black-and-white-1421526926358ytxdu.png" width="50px" heigh="50px">';
  }
}

<div class="modeloProduto">
<p>Massa Muscular</p>
</div>
<br>
<div class="modeloProduto">
<p>Teste</p>
</div>
<br>
<div class="modeloProduto">
<p>Massa Muscular</p>
</div>

Answer 2

People got what they wanted, I’ll leave the solution in case someone wants to do the same

$().ready(function () {
    $('.modeloProduto').each(function () {
        string = $(this).text('Massa Muscular');
        $(this).html('<img src="https://www.standsuplementos.com/arquivo/index/389081/icomuscle.png" alt="' + string + '" />');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="modeloProduto">
<p>Massa Muscular</p>"
</div>

With this where is written "Muscle Mass" appears the image in place =D

I found the solution here: https://onelittledesigner.com/rapidweaver/rapidweaver-snippets/replacing-text-with-an-image-using-jquery/