Change text to icon according to text

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

I do not handle a lot of site programming but I'm making a website with what I know, I wanted a script that changes the "Muscle Mass" to an icon

Type like this, if you type "Muscle Mass", an arm icon will appear, if "Weight" appears, a balance appears instead of the text

The site is this - > link

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

    
asked by anonymous 28.10.2018 / 16:19

2 answers

2

It seems that you are very limited so I aimed to use everything as simple as possible, let's understand the code.

  

tags: Ali goes the element you want the code to check

     

searchText: Text to be found

     

o is simply sweeping all objects found by tagname and comparing their text, if it is the same it replaces the html of the element with an image, modify according to your need, it is worth remembering that in case you have in mind the place Exactly, just modify the code for a getElementById thus avoiding for!

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>
    
28.10.2018 / 17:30
0

People got what I wanted, I'll leave the solution if 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><divclass="modeloProduto">
<p>Massa Muscular</p>"
</div>

With this where it says "Muscle Mass" the image appears in place = D

I found the solution here: link

    
28.10.2018 / 17:30