preg_replace-将转换为

Question

我正在努力将图像标记转换为链接并复制标记内的参数，即。

<img src="/images/image1.jpg" alt="The name of image">

进入

<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of image"><img src="/images/image1.jpg" alt="The name of image"></a>

我的问题不仅仅是复制src和alt数据，还包括丢失和额外的标记。

<img src="/images/image1.jpg" >

进入

<a href="/images/image1.jpg" target="_self" rel="zoom" title=""><img src="/images/image1.jpg" ></a>

和

<img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image">

进入

<a href="/images/image1.jpg" target="_self" rel="zoom" title="The name of the image"><img style="padding:5px;" src="/images/image1.jpg" alt="The name of the image"></a>

这需要对整个字符串中img标记的所有实例执行。

不是说听起来像是一个挑战，但是有人能提出一个可能的解决方案吗，我相信这可以用preg_replace但是我就是做不到？

非常感谢。

Answer 1

最简单的方法是：HTML：

<span id="My_ID"><img class="My_img" src="/images/image1.jpg" alt="The name of image" /></span>

JavaScript和JQUERY（不是必需的，但我使用它是为了与浏览器兼容）：

var first= true;
$('.My_img').hover(function(){    
    if(first == true){
     //First time this prevent Dulicated runing and shows errors
        first = false;//it is not thew first time anymore
var alt = $('.My_img').attr('alt');//Get the img alt
    var src = $('.My_img').attr('src');//Get the img src
    document.getElementById('My_ID').innerHTML = '<a href="' + src + '" target="_self" rel="zoom" title="' + alt + '"  ><img src="' + src +'" alt="' + alt + '" width="200" height="100"></a>';
    }
});

要演示上述内容，她是一个小提琴：

http://jsfiddle.net/Mh9Np/

简单，但innerHTML是一个不好的做法，因为每个人都说，所以我会给你一个想法关于其他方式：（Samse超文本标记语言）

1-将img存储在变量中

2-将alt和src属性存储在变量中。

2-创建一个元素。

3-借助alt和src变量为其设置所需的属性。

4-将img附加到a。

5-在跨度上追加a。

6-删除原始img//可选它可能有助于解决一些样式问题。