Question

我正在抓取其他网站的文字。一旦从另一个站点抓取文本，我得到这样的东西：

<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标签一样，以便用图像本身替换它找到的所有图像？

Answer 1

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

Answer 2

试试这个：

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

Answer 3

WorkingFiddle

在欲望div上创建空var并附加图像链接。

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

JavaScript / JQuery在HTML中查找图像链接并转换为实际图像

3 个答案: