Question

我有一段search engine我已经玩了一段时间了，现在有一段时间我想添加一个新功能：在我的网站上搜索时显示文章图像。见例：

Searching for QTox - EuroBytes

我有一些我玩垃圾箱的代码，但是当multiple links时它不起作用。这意味着它只显示第一个链接的图像。引擎将整个代码放在变量中。

我想要的是一个php / js（jquery）代码，它解析一个链接 - 由搜索引擎提供 - 在$url变量中，它将搜索a其中的标记为img，类名为article-image。然后将其显示在a标记中，标识为searchimage。可能会更好地在课堂上改变它，但我会依靠你们这些更好的选择。

与img的外部链接：

<a class="article-image" title="Qtox" href="http://i.imgur.com/GePjpxg.png">
  <img src="http://i.imgur.com/GePjpxg.png" alt="Qtox">
</a>

搜索引擎在创建更多链接时，将使用相同的模板，因此必须一次又一次地使用代码。

到目前为止，这是我到目前为止重复使用的代码：

<?php
$tagName = 'img';
$articlimageclass = "article-image";

$dom = new DOMDocument;
$dom->preserveWhiteSpace = true;
@$dom->loadHTMLFile("$url");

$linkimg = getTags($dom, $tagName);

?>
<?php
function getTags($dom, $tagName) {
     $linkimg = get_class($articlimageclass);

     $domxpath = new DOMXPath($dom);
     $newDom = new DOMDocument;
     $newDom->formatOutput = false;

     $filtered = $domxpath->query("//$tagName");
     $i = 0;
     while( $myItem = $filtered->item($i++) ){
         $node = $newDom->importNode( $myItem, true );
         $newDom->appendChild($node);                
     }
     $linkimg = $newDom->saveHTML();
//     return "<b>$html</b>";     

     echo "$linkimg";
}
?>

我是php等的新手。所以我希望你们中的一些人能帮助我！

Answer 1

我根本不和DOMDocument合作，所以这只是猜测。您可以稍微修改一下您的功能：

function makeImageLink($dom, className) {
     $supported_image = array(
      'gif',
      'jpg',
      'jpeg',
      'png'
     );

     $domxpath = new DOMXPath($dom);
     $newDom = new DOMDocument;
     $newDom->formatOutput = false;

     if(isset($className){
       $filtered = $domxpath->query("//a[class='$className']");
     } else {
       return false;
     }
     foreach($filtered as $a){
       $href = $a->getAttribute("href");
       $ext = strtolower(pathinfo($href, PATHINFO_EXTENSION)); // Using strtolower to overcome case sensitive
       if (in_array($ext, $supported_image)) {
         $a->innerHTML = "<img src='$href'>";
       }
     }
}

要在JQuery（在浏览器中）执行此操作，它将是：

var a = $("a[class='article-image']");
var supportedImages = array('.gif', '.jpg', '.jpeg', '.png');
$.each(a, function(k, v)){
  var imgType = $(this).substring($(this).lastIndexOf("."));
  if(supportImages.indexOf(imgType)){
    $(this).html("<img src='" + $(this).attr('href') + "'>");
  }
}

如何从链接中获取带有类名的img标记？

1 个答案: