2

我有图像标签<img src="path_to_file.png">，但我希望将图像标签转换为移动网站中的链接。所以我希望将 img 转换为 href：

<a href="path_to_file.png" target="_blank">Click here to open in new tab</a>

我开始使用 php dom。我可以列出所有属性。

$newdocument = new DOMDocument();
$newdocument->loadHTML();
$getimagetag = $doc->getElementsByTagName('img');
foreach($getimagetag as $tag) {
    echo $src=$tag->getAttribute('src');
}

但是我们如何获取 src 属性，然后完全删除 img 标签，因为它包含其他参数，如高度和长度，然后创建新的链接标签？

大家好，我可以使用以下代码从 php dom 完成它

$input="<img src='path_to_file.png' height='50'>";
    $doc = new DOMDocument();
    $doc->loadHTML($input);
    $imageTags = $doc->getElementsByTagName('img');
    foreach($imageTags as $tag) {
        $src=$tag->getAttribute('src'); 
        $a=$doc->createElement('a','click here to open in new tab');
        $a->setAttribute('href',$src);
        $a->setAttribute('style','color:red;');
        $tag->parentNode->replaceChild($a,$tag);
        } 
        $input=$doc->saveHTML();
echo $input;

create 元素也可用于在<a></a>Click...new 选项卡之间放置文本。

replacechild 用于删除 $tag ieimg并将其替换为atag。通过设置属性，我们可以添加其他参数，如样式、目标等。

我最后使用了 php dom，因为我只想转换从 mysql 获得的数据，而不是转换网站徽标等其他元素。当然也可以使用javascript。

谢谢

@dave chen 用于 javascript 方式并指向检测移动链接。

@nate 指出我的答案。

4

2 回答 2

3

使用phpQuery，很神奇。就像使用 jquery 一样！:) https://code.google.com/p/phpquery/

于 2013-07-28T17:08:14.757 回答
2

我建议使用 JavaScript 执行此操作：

<!DOCTYPE html>
<html>
<head>
    <title>Images Test</title>
    <script>
        window.onload = changeImages;

        function changeImages() {
            var images = document.getElementsByTagName("img");

            while (images.length > 0) {
                var imageLink       = document.createElement("a");
                imageLink.href      = images[0].src;
                imageLink.innerHTML = "Click here to view " + images[0].title;
                images[0].parentNode.replaceChild(imageLink, images[0]);
            }
        }
    </script>
</head>
<body>
    Here is a image of flowers  : <img src="images/flowers.bmp"   title="Flowers"  ><br>
    Here is a image of lakes    : <img src="images/lakes.bmp"     title="Lakes"    ><br>
    Here is a image of computers: <img src="images/computers.bmp" title="Computers"><br>
</body>
</html>

例子

于 2013-07-28T17:29:36.980 回答