JavaScript/JQuery Find Image Links in HTML and Convert to Actual Image

Question

I am grabbing text from another site. Once the text is grabbed from another site, I get something like this:

<div id="target">
    <p><a href="http://www.example.com/image.png" rel="nofollow">http://www.example.com/image.png</a></p>
    <p>More Text blah blah blah</p>
    <p><a href="http://www.example.com/image2.png" rel="nofollow">http://www.example.com/image2.png</a></p>
</div>

How can I grab those paragraphs with links to images and replace them with the image itself like by using an img tag so that it replaces all the images it finds with the image itself?

What do u means "I am grabbing text from another site"? Can I assume the above html elements u described are in your page source? — Sithu Kyaw
– Sithu Kyaw, Commented Jan 13, 2017 at 4:30
@dimyLute Yes for all intents and purposes the text is in there on page load. — Zach Sugano
– Zach Sugano, Commented Jan 13, 2017 at 4:42

Super User · Accepted Answer · 2017-01-13 04:49:21Z

2

Try this with jquery.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>

    </title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
    <div id="target">
    <p><a href="http://www.example.com/image.png" rel="nofollow">http://www.example.com/image.png</a></p>
    <p>More Text blah blah blah</p>
    <p><a href="http://www.example.com/image2.png" rel="nofollow">http://www.example.com/image2.png</a></p>
</div>
	
<script>
    $(document).ready(function(){
        $.each($('#target').find('a'),function(index,element){
            var imgSrc = $(this).attr('href'); ///get url from href property of current 'a' tag
            $(this).parent().remove();///remove parent 'p' tag
            $(this).remove(); ///Remove the current 'a' tag
            $('#target').append('<img src="' +imgSrc  + '" />');
        });
    });
</script>
</body>
</html>

edited Jan 13, 2017 at 4:49

Super User

9,6623 gold badges34 silver badges48 bronze badges

answered Jan 13, 2017 at 4:22

Sithu Kyaw

3931 gold badge4 silver badges17 bronze badges

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

2 Comments

Zach Sugano Over a year ago

This seems to be working, but it adds it to the end of the div rather than replacing the link with the image

Sithu Kyaw Over a year ago

As my script in answer it will remove the 'a' tag and its parent 'p' and add an 'img' tag with url value of original href value. Leaving the 'div' tag is just to give a container for the added image tags. You can manipulate as you want to the html elements.

Vivek Athalye · Accepted Answer · 2017-01-13 04:48:59Z

2

Try this:

$(function(){
$('#target a').each(function(index,element){
	var src = $(this).attr('href');
	$(this).parent().append('<img src="' + src  + '" />');
	$(this).remove();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
	<p><a href="http://www.example.com/image.png" rel="nofollow">http://www.example.com/image.png</a></p>
	<p>More Text blah blah blah</p>
	<p><a href="http://www.example.com/image2.png" rel="nofollow">http://www.example.com/image2.png</a></p>
</div>

answered Jan 13, 2017 at 4:48

Vivek Athalye

2,9792 gold badges24 silver badges34 bronze badges

Comments

4b0 · Accepted Answer · 2017-01-13 04:31:26Z

0

WorkingFiddle

Create empty var and append image link on desire div.

var html = "";
$('#target >p >a').each(function(i, obj) {
  var imageurl = $(this).prop('href');
  html += '<img src="' + imageurl + '" alt="Mountain View" style="width:304px;height:228px;">';
});
$('#imageShowcase').append(html);

And modified html for demo :

<div id="target">
  <p><a href="http://www.example.com/image.png" rel="nofollow">http://www.example.com/image.png</a></p>
  <p>More Text blah blah blah</p>
  <p><a href="http://www.example.com/image2.png" rel="nofollow">http://www.example.com/image2.png</a></p>
</div>
<div id='imageShowcase'>

</div>

answered Jan 13, 2017 at 4:31

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Collectives™ on Stack Overflow

JavaScript/JQuery Find Image Links in HTML and Convert to Actual Image

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related