-2

我有一个包含多个链接的文本。一个链接看起来像

<a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>

首先，我想将div标签包裹在所有href标签上，但href前提是以http://www.mydomain.com/files/. 所以上面的链接（因为它以那个前缀开头）应该变成

<div class="myLink">
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
</div>

然后根据文件扩展名（ 的结尾字符href）在链接之前添加图像，使其变为

<div class="myLink">
   <img src="pdf_file_icon.png" alt="File type icon" />
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
</div>

并且可以选择在链接之后添加一些我的文本，以便最终版本变为

<div class="myLink">
   <img src="pdf_file_icon.png" alt="File type icon" />
   <a href="http://www.mydomain.com/files/test1.pdf" target="_blank">My link</a>
   <span class="fileSize">1.3 Mb</span>
</div>

我需要PHP和JavaScript/jQuery的解决方案 （我认为 jQuery 因为它的选择器功能而更容易？）。

我想要得到的是从常规文本链接移动到这样的东西（不要打扰文件大小，它是预先计算好的，所以它就像任何其他常规/虚拟文本一样）

在此处输入图像描述

编辑#1

这是我在PHP中的尝试

$regexp = "<a\s[^>]*href=(\"??)(http:\/\/www\.mydomain\.com\/files\/[^\" >]*?)\\1[^>]*>(.*)<\/a>";
$text = preg_replace("/$regexp/siU", "<div class=\"fileAttachment\"><img src=\"pdf_file_icon.png\" alt=\"File type icon\" /><a href=\"$2\" target=\"_blank\">$3</a></div>", $text);

但我不确定如何立即检查文件扩展名并根据它插入适当的图像（pdf_file_icon.png）？

4

3 回答 3

1

因为有点无聊，这里有一个jQuery实现：

$('a[href^="http://www.mydomain.com/files"]')
    .each(function() {
        var t = $(this);
        var href = $(this).attr('href');
        var ext = href.substring(href.lastIndexOf('.') + 1);
        t.wrap('<div class="mylink"></div>');
        switch (ext) {
            case 'pdf': 
               t.before('<img src="pdf_file_icon.png" alt="File type icon" />'); 
               break;
            // Add more types here
        }
        t.after('<span class="fileSize">1.3 Mb</span>');
    }
);​

http://jsfiddle.net/AK9nG/

当然要在 PHP 中完成，您可以直接编辑 HTML 吗？

于 2012-08-24T09:09:43.620 回答
1

这是一个php解决方案。你必须自己做文件大小的事情。易于添加。

我不使用 preg replace 的原因是因为它保持可读性，除非你翻译 > 100kb 的文本文件，否则它足够快，并且便于调试。

$rawhtml = 'your html file here<a href="http://www.go.com">test</a> and <a href="http://www.do.com/where.pdf">test</a>';
// Explode at every <a tag
$explodedhtml = explode("<a ",$rawhtml);
// Loop through everything
foreach($explodedhtml as $piece)
    {
    // Does our piece contain href?
    if(strpos($piece,"href=") !== false)
        {
            // Extract the url
        $href = substr($piece,strpos($piece,'href=')+6,((strpos($piece,'"',7))-(strpos($piece,'href=')+6)));
        // easy debug
        //echo $href . "<BR>";
            // Does it end in pdf?
        if(substr($href,strlen($href)-4,strlen($href)) === ".pdf")
            {
                    // add all the stuff we want for a pdf file
            $filezie = filsizecomputingfunction();// Put here your filesize thingymejig
            $piece = implode("</a>$filesize</div>",explode("</a>",$piece));// Add filesize here
            $pieces[] =  '<div class="myLink"><img src="pdf_file_icon.png" alt="File type icon" /><a '.$piece;
            }
            // It isn't a pdf...
        else
            {
                    //Just add our closing divs... after the closing tag
            $piece = implode("</a></div>",explode("</a>",$piece));
                    // add to array, add div class and our opening tag
            $pieces[] =  '<div class="myLink"><a '.$piece;          
            }
        }
    // Nothing to detect, just shove it in our array.
    else
        {
        $pieces[] = $piece;
        }
    }
Return to our basic variable so we can work with it in the displaying thingymejig.
$rawhtml = implode('',$pieces);
于 2012-08-24T09:22:47.170 回答
0

您可以将文件图标作为元素本身的背景图像，然后使用 css 根据文件扩展名应用样式：

a[href$=".pdf"] {
  display: block;
  border: 1px solid salmon;
  background: lighblue url('pdf-icon.png') no-repeat;
  /* etc... */
}
于 2012-08-24T09:05:34.670 回答