[Solved] JavaScript replace text with images problem

by

Introduction

The JavaScript replace text with images problem is a common issue that developers face when trying to display images in a web page. This problem can be solved by using the JavaScript replace() method, which allows you to replace text with an image. This tutorial will explain how to use the replace() method to solve this problem and provide some examples of how it can be used.

Solution

// Create a function that takes a string as an argument and replaces any words with images
function replaceTextWithImages(str) {
// Create an object to store the words and their corresponding images
const wordsToImages = {
‘happy’: ‘happy‘,
‘sad’: ‘sad‘,
‘angry’: ‘angry‘
};

// Split the string into an array of words
const words = str.split(‘ ‘);

// Loop through the words array
for (let i = 0; i < words.length; i++) { // Check if the current word is in the wordsToImages object if (wordsToImages[words[i]]) { // If it is, replace the word with the corresponding image words[i] = wordsToImages[words[i]]; } } // Join the words array back into a string and return it return words.join(' '); } // Example const str = 'I am feeling happy today'; console.log(replaceTextWithImages(str)); // Output: 'I am feeling happy today’


The code is working when I test it. One possible reasons why it would fail is that you have some other code that is replacing the load event that you set, for example by setting the onload attribute in the body tag.

Replacing the entire body content might conflict with other code that is manipulating the content. Preferrably you should only replace the content of specific elements inside the body.

I would rather use a regular expression to make a single replacement instead of looping through the strings and doing one replacement at a time. That should help a lot if you replace the content in specific elements instead of the entire body.

Most of the image tags are the same, so you don’t have to repeat that for every card. The image should have an alt attribute to conform with the standards, you can use the original text for that.

window.onload = function(){
  var cardname = {
    'Ace of Hearts': '7/7c/Ornamental_h_a.svg/88px-Ornamental_h_a',
    '2 of Hearts': '7/7c/Ornamental_h_2.svg/88px-Ornamental_h_2',
    '3 of Hearts': '7/7c/Ornamental_h_3.svg/88px-Ornamental_h_3',
    '4 of Hearts': '7/7c/Ornamental_h_4.svg/88px-Ornamental_h_4',
    '5 of Hearts': '7/7c/Ornamental_h_5.svg/88px-Ornamental_h_5',
    '6 of Hearts': '7/7c/Ornamental_h_6.svg/88px-Ornamental_h_6',
    '7 of Hearts': '7/7c/Ornamental_h_7.svg/88px-Ornamental_h_7',
    '8 of Hearts': '7/7c/Ornamental_h_8.svg/88px-Ornamental_h_8',
    '9 of Hearts': '7/7c/Ornamental_h_9.svg/88px-Ornamental_h_9',
    '10 of Hearts': '9/91/Ornamental_h_10.svg/88px-Ornamental_h_10',
    'Jack of Hearts': '7/7c/Ornamental_h_j.svg/88px-Ornamental_h_j',
    'Queen of Hearts': '7/7c/Ornamental_h_q.svg/88px-Ornamental_h_q',
    'King of Hearts': '7/7c/Ornamental_h_k.svg/88px-Ornamental_h_k',
    'Ace of Spades': '7/7c/Ornamental_s_a.svg/88px-Ornamental_s_a',
    '2 of Spades': '7/7c/Ornamental_s_2.svg/88px-Ornamental_s_2',
    '3 of Spades': '7/7c/Ornamental_s_3.svg/88px-Ornamental_s_3',
    '4 of Spades': '7/7c/Ornamental_s_4.svg/88px-Ornamental_s_4',
    '5 of Spades': '7/7c/Ornamental_s_5.svg/88px-Ornamental_s_5',
    '6 of Spades': '7/7c/Ornamental_s_6.svg/88px-Ornamental_s_6',
    '7 of Spades': '7/7c/Ornamental_s_7.svg/88px-Ornamental_s_7',
    '8 of Spades': '7/7c/Ornamental_s_8.svg/88px-Ornamental_s_8',
    '9 of Spades': '7/7c/Ornamental_s_9.svg/88px-Ornamental_s_9',
    '10 of Spades': '7/7c/Ornamental_s_10.svg/88px-Ornamental_s_10',
    'Jack of Spades': '7/78/Ornamental_s_j.svg/88px-Ornamental_s_j',
    'Queen of Spades': '7/7c/Ornamental_s_q.svg/88px-Ornamental_s_q',
    'King of Spades': '7/7c/Ornamental_s_k.svg/88px-Ornamental_s_k',
    'Ace of Clubs': '7/7c/Ornamental_c_a.svg/88px-Ornamental_c_a',
    '2 of Clubs': '7/7c/Ornamental_c_2.svg/88px-Ornamental_c_2',
    '3 of Clubs': '7/7c/Ornamental_c_3.svg/88px-Ornamental_c_3',
    '4 of Clubs': '7/7c/Ornamental_c_4.svg/88px-Ornamental_c_4',
    '5 of Clubs': '7/7c/Ornamental_c_5.svg/88px-Ornamental_c_5',
    '6 of Clubs': '7/7c/Ornamental_c_6.svg/88px-Ornamental_c_6',
    '7 of Clubs': '7/7c/Ornamental_c_7.svg/88px-Ornamental_c_7',
    '8 of Clubs': '7/7c/Ornamental_c_8.svg/88px-Ornamental_c_8',
    '9 of Clubs': '7/7c/Ornamental_c_9.svg/88px-Ornamental_c_9',
    '10 of Clubs': '7/7c/Ornamental_c_10.svg/88px-Ornamental_c_10',
    'Jack of Clubs': '7/7c/Ornamental_c_j.svg/88px-Ornamental_c_j',
    'Queen of Clubs': '7/7c/Ornamental_c_q.svg/88px-Ornamental_c_q',
    'King of Clubs': '7/7c/Ornamental_c_k.svg/88px-Ornamental_c_k',
    'Ace of Diamonds': '7/7c/Ornamental_d_a.svg/88px-Ornamental_d_a',
    '2 of Diamonds': '7/7c/Ornamental_d_2.svg/88px-Ornamental_d_2', 
    '3 of Diamonds': '7/7c/Ornamental_d_3.svg/88px-Ornamental_d_3',
    '4 of Diamonds': '7/7c/Ornamental_d_4.svg/88px-Ornamental_d_4',
    '5 of Diamonds': '7/7c/Ornamental_d_5.svg/88px-Ornamental_d_5',
    '6 of Diamonds': '7/7c/Ornamental_d_6.svg/88px-Ornamental_d_6',
    '7 of Diamonds': '7/7c/Ornamental_d_7.svg/88px-Ornamental_d_7',
    '8 of Diamonds': '7/7c/Ornamental_d_8.svg/88px-Ornamental_d_8',
    '9 of Diamonds': '7/7c/Ornamental_d_9.svg/88px-Ornamental_d_9',
    '10 of Diamonds': '7/7c/Ornamental_d_10.svg/88px-Ornamental_d_10',
    'Jack of Diamonds': '7/7c/Ornamental_d_j.svg/88px-Ornamental_d_j',
    'Queen of Diamonds': '7/7c/Ornamental_d_q.svg/88px-Ornamental_d_q',
    'King of Diamonds': '7/7c/Ornamental_d_k.svg/88px-Ornamental_d_k'
  };

  document.body.innerHTML = document.body.innerHTML.replace(
    /((?:Ace|[2-9]|10|Jack|Queen|King) of (?:Hearts|Spades|Clubs|Diamonds))/g,
    function(m){
      return '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+cardname[m]+'.svg.png" alt="'+m+'" />';
    }
  );

}

Edit:

To replace the contents of specific elements, you can for example use:

var elements = document.getElementsByTagName('DIV');
for (var i=0; i<elements.length; i++) {
  elements[i].innerHTML = elements[i].innerHTML.replace( ...same as above... );
}

Edit 2:

As the tags only contains the card name, you don’t need the replacement at all, you can just get the name and put the image in it’s place:

var elements = document.getElementsByTagName('LI');
for (var i=0; i<elements.length; i++) {
  if (elements[i].className && elements[i].className == 'card') {
    var name = elements[i].innerHTML;
    var img = cardname[name];
    if (typeof(img) == "undefined") {
      img = "8/89/Back07.svg/88px-Back07";
    }
    elements[i].innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/'+img+'.svg.png" alt="'+name+'" />';
  }
}

11

solved JavaScript replace text with images problem


Solved: JavaScript Replace Text with Images Problem Code with Pre HTML Tags

Replacing text with images in JavaScript can be a tricky problem to solve. Fortunately, there is a simple solution that can be used to replace text with images using pre HTML tags. This article will explain how to use pre HTML tags to replace text with images in JavaScript.

The first step is to create an image tag in HTML. This can be done by using the following code:

Image

The image tag should be placed inside a pre HTML tag. This will ensure that the image is displayed correctly when the page is rendered.

The next step is to create a JavaScript function that will replace the text with the image. This can be done by using the following code:

function replaceTextWithImage(text) {
  var img = document.createElement("img");
  img.src = "image.jpg";
  img.alt = "Image";
  return img;
}

The replaceTextWithImage function takes a string as an argument and returns an image element. This function can then be used to replace the text with the image.

The final step is to call the replaceTextWithImage function in the JavaScript code. This can be done by using the following code:

var text = "This is some text";
var image = replaceTextWithImage(text);
document.body.appendChild(image);

The code above will replace the text with the image. This is a simple solution to the problem of replacing text with images in JavaScript.

Using pre HTML tags to replace text with images in JavaScript is a simple and effective solution. This article has explained how to use pre HTML tags to replace text with images in JavaScript.