Я беру текст с другого сайта. Как только текст взят с другого сайта, я получаю что-то вроде этого:

<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>

Как я могу получить эти абзацы со ссылками на изображения и заменить их самим изображением, используя тег img, чтобы он заменял все найденные изображения самим изображением?

0
Zach Sugano 13 Янв 2017 в 07:07

3 ответа

Лучший ответ

Попробуйте это с помощью 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>
2
Super User 13 Янв 2017 в 04:49

WorkingFiddle

Создайте пустую переменную и добавьте ссылку на изображение по желанию 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);

И модифицированный HTML для демо:

<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>
0
Shree 13 Янв 2017 в 04:31

Попробуй это:

$(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>
1
Vivek Athalye 13 Янв 2017 в 04:48