I have a span:

<span class="attr attr-value">Brand Name</span>

And I want to replace that text with an image, based on the text

Here is what I have:

<script type="text/javascript">
 var oldHTML = document.getElementsByClass('attr-value').innerHTML;
 var filename = oldHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
 var newHTML = "<img src='/" + filename + ".jpg'>";
 document.getElementsByClass('attr-value').innerHTML = newHTML;
</script>

What am I doing wrong here?

I have a span:

<span class="attr attr-value">Brand Name</span>

And I want to replace that text with an image, based on the text

Here is what I have:

<script type="text/javascript">
 var oldHTML = document.getElementsByClass('attr-value').innerHTML;
 var filename = oldHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
 var newHTML = "<img src='http://www.example./" + filename + ".jpg'>";
 document.getElementsByClass('attr-value').innerHTML = newHTML;
</script>

What am I doing wrong here?

• javascript
• replace
• getelementsbyclassname

4 Answers 4

This line is an issue:

var oldHTML = document.getElementsByClass('attr-value').innerHTML;

document.getElementsByClass should be document.getElementsByClassName, and it returns a NodeList, which doesn't have an innerHTML property. You'd want to loop through the NodeList to look at the innerHTML of each element.

Something like this (live example):

<script type="text/javascript">
(function() {
    var list, index, element, filename;
    list = document.getElementsByClassName('attr-value');
    for (index = 0; index < list.length; ++index) {
        element = list[index];
        filename = element.innerHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
        element.innerHTML = "<img src='http://www.example./" + filename + ".jpg'>";
    }
})();
</script>

Changes:

1. Put the whole thing in an anonymous function and immediately execute that function, to avoid creating global symbols.
2. Use the correct getElementsByClassName
3. Loop through them
4. Operate on the innerHTML of each element.

Notes:

• IE doesn't have getElementsByClassName, so you'll want to be sure you're loading a script that provides it on IE. That's not provided in the live example above, use Firefox, Chrome, or Opera. (Just search for "getElementsByClassName for IE" and you'll find several implementations to choose from.)
• The above script tag will need to be placed after all of the elements you want to process in the HTML file.

• class="attr attr-value" and you're calling
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();

It should be, (e.g)

document.getElementsByClassName('attr-value')[0];

I also had this problem using an extension to create food and drink menu items with pricing on a Joomla site built with gantry5. Although excellent and free, the extension did not cater for dietary notifications (vegetarian, vegan gluten free etc) in the listing title, and the end customer wanted a symbol adding to the end of any listing title that fell into one of those categories.

So, because I could add in a text string, eg. -veg- -vgn- -gf- the solution became apparent that for each instance of that text string I could replace it with an image.

The output html was typically then of this structure:

<td class="pmtitle">Mozzarella & Pesto -veg- -gf-</td>

The script replaces each instance of -veg- and -gf- with the appropriate image

    <script>
const vegTexts = document.querySelectorAll("td.pmtitle");

for (const vegText of vegTexts) {
  vegText.innerHTML = vegText.innerHTML
    .replace(/-veg-/g, "<img src='[path]/images/icon-images/vegetarian.png'>");
}

const vgnTexts = document.querySelectorAll("td.pmtitle");

for (const vgnText of vgnTexts) {
  vgnText.innerHTML = vgnText.innerHTML
    .replace(/-vgn-/g, "<img src='[path]/images/icon-images/vegan.png'>");
}

const gfTexts = document.querySelectorAll("td.pmtitle");

for (const gfText of gfTexts) {
  gfText.innerHTML = gfText.innerHTML
    .replace(/-gf-/g, "<img src='[path]/images/icon-images/gluten-free.png'>");
}
</script>

I applied the script just before </body> and it works perfectly.

there may be some more elegant solution but this approach may be useful to anyone with a similar problem.

After this of course, you can use css to style the img in the newly generated selector.

Even with several hundred listings to loop through the Lighthouse performance of the page after this amend still came out at 95 so I'm happy with it. In fact you can add more options separated by ma into the brackets of the function to match each and every class or tag that includes the text string you wish to replace.

For example, sometimes the text string was added into the description of the item, so you could simply add that class into the function (as indeed, I also needed)

const gfTexts = document.querySelectorAll("td.pmtitle, td.pmtitle2, td.pmdesc");

for (const gfText of gfTexts) {
  gfText.innerHTML = gfText.innerHTML
    .replace(/-gf-/g, "<img src='[path]/images/icon-images/gluten-free.png'>");

Hope this helps