Replace html string to img tag with pure javascript

Question

I want javascript to do this:

According the word that is in the div, i want the string be replaced with a img tag.

if i have

<div id="example" style="align-content: right; text-align: right">abc</div>

with `

<div id="example" style="align-content: right; text-align: right"><img src="example123.html"></div>`

But only if inside the div is the text/string "abc"

Another case, if i have

<div id="example" style="align-content: right; text-align: right">def</div>

i want to convert into this

<div id="example" style="align-content: right; text-align: right"><img src="anotherexample.html"></div>

As the similar of the 1st case, replace with another img in case of the text be "def".

I have done this with jquery,

This was my code done in jquery

$("#example:contains('abc')").html(function (_, html) {return html.replace(/abc/g, "<img src=example123.html>")});

$("#example:contains('def')").html(function (_, html) {return html.replace(/def/g, "<img src=anotherexample.html>")});

It was easy to do, but i have some problems using jquery in my work, so i can't and i shouldn't use jquery or another framework. It would be great if it was done in pure javascript.

I almost forgot that it would be great using conditionals, specially swith, i think using switch instead of if else could be less tangled

Thanks in advance for your answers.

PD: if you ask me why i need to solve this, the reason is that i am using an application that generates pdf files extracting the data from a DB, and according to the text, replace with the pics with a specific URL.

It seems like you have many divs with the same id. ids must be unique to each element; they cannot be repeated — Nick Parsons
– Nick Parsons, Commented Feb 28, 2019 at 5:26
Use document.querySelector("#example"), get its textContent, and check if it contains abc. If it does, assign its innerHTML. — Barmar
– Barmar, Commented Feb 28, 2019 at 5:27
why don't you simply clear the text , So it doesnt matter what the text is and append img tag to the div ? — Thanveer Shah
– Thanveer Shah, Commented Feb 28, 2019 at 5:27
I have put the jquery code so it can be watched my already solution. I will take your advice, thanks — J1293
– J1293, Commented Feb 28, 2019 at 5:28
The jQuery code will change fooabcdef to foo<img src=example123.html>def. Is that really the desired result? — Barmar
– Barmar, Commented Feb 28, 2019 at 5:30

CertainPerformance · Accepted Answer · 2019-02-28 05:28:17Z

3

Because you're using an element with a particular id, it's unique - all you need to do is select that element and check to see if its innerHTML includes the string you're looking for. You could use a regular expression to replace all instances of abc or def with the appropriate tag:

const example = document.querySelector('#example');
const srcs = {
  abc: 'example123',
  def: 'anotherexample'
};
example.innerHTML = example.innerHTML.replace(
  /abc|def/g,
  prop => `<img src="${srcs[prop]}">`
);

<div id="example" style="align-content: right; text-align: right">before abc after</div>

answered Feb 28, 2019 at 5:28

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ellipsis · Accepted Answer · 2019-02-28 05:29:15Z

2

Try this. It iterates over all the div elements and checks their text using textContent.If it matches it replaces the text with image tag using innerHTML

var a = document.querySelectorAll('div');
a.forEach((e) => {
  if (e.textContent == "abc")
    e.innerHTML = "<img src='example123.com'>"
 if(e.textContent == "def")
    e.innerHTML = "<img src='anotherexample.com'>"
})

<div id="example" style="align-content: right; text-align: right">abc</div>
<div id="example" style="align-content: right; text-align: right">def</div>

edited Feb 28, 2019 at 5:29

answered Feb 28, 2019 at 5:26

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Replace html string to img tag with pure javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related