Question

我的文字中包含多个链接。一个链接看起来像

<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更容易因为它的选择器功能？）。< / p>

我想得到的是从常规text link转到这样的事情（不要打扰文件大小，它是预先计算的，所以它就像任何其他常规/虚拟文本一样）

enter image description here

编辑＃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）？

Answer 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吗？

Answer 2

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

我不使用preg替换的原因是因为这使它保持可读性，除非你翻译＆gt; 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);

Answer 3

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

a[href$=".pdf"] {
  display: block;
  border: 1px solid salmon;
  background: lighblue url('pdf-icon.png') no-repeat;
  /* etc... */
}

包裹div超链接（标签）

编辑＃1

3 个答案: