构造正则表达式以用 <a> 包装图像

Question

一个网页包含很多图片元素：

<img src="myImage.gif" width="180" height="18" />

但它们的格式可能不是很好，例如，可能缺少宽度或高度属性。它也可能无法用 / 正确关闭。 src 属性始终存在。

我需要一个正则表达式，用一个将 href 设置为 img 的 src 的超链接包装这些内容。

<a href="myImage.gif" target="_blank"><img src="myImage.gif" width="180" height="18" /></a>

我可以在此编辑器中使用此正则表达式成功定位图像：http://gskinner.com/RegExr/:

<img src="([^<]*)"[^<]*>

但是下一步是什么？

Answer 1

基于 DOM 的方法是最好的，但如果该正则表达式有效（对于一般的 HTML 输入来说不容易完成）以匹配所需的 <img> 元素和 src 的值在\1 中捕获的属性，然后将整个匹配项（在\0 中捕获）替换为：

<a href="\1" target="_blank">\0</a>

在 Java 中，替换字符串中的反向引用将是 $0 和 $1；我不确定您使用的是什么语言，因此请相应调整。

但是，在 Java 中，这样的事情会起作用：

String imgHrefed = str.replaceAll(
   "<img src=\"([^<]*)\"[^<]*>",
   "<a href=\"$1\" target=\"_blank\">$0</a>"
);

---

从您的问题中不清楚如何处理<img> 可能具有的任何其他属性。上述替换使它们保持原样。如果您还想重写它们（即您不再只是将<img> 包装在<a> 中），那么也许您想重写为：

<a href="\1" target="_blank"><img src="\1" width="180" height="18" /></a>

Answer 2

在 JavaScript 中，使用 string.replace()，$1 是您匹配的部分：

str.replace(/<img src="([^<]*)"[^<]*>/, 
    '"<a href="$1" target="_blank"><img src="$1" width="180" height="18" /></a>')

或者最好还是捕获整个image 标记（现在src 是$2，因为它在第二次捕获中）：

s.replace(/(<img src="([^<]*)"[^<]*>)/, '"<a href="$2" target="_blank">$1</a>')

Answer 3

在 .net 中，正则表达式在大多数情况下与 javascript 基本相同，但周围代码的符号会略有不同。

    string imageHtmlSnippet = @"<img src=""myImage.gif"" width=""180"" height=""18"" />";
    string imageHtmlReplacement = @"<a href=""$1"" target=""_blank""><img src=""$1"" width=""180"" height=""18"" /></a>";

    Regex findImages = new Regex(@"<img src=""([^<]*)""[^<]*>");

    string fixedHtmlSnippet = findImages.Replace(imageHtmlSnippet, imageHtmlReplacement);

但是 - 如果 src 不是标签上的第一个属性，则此正则表达式将失败。我没有时间修复它，因为我应该已经出门了:)

实际上，您应该寻找一个 html 解析库，例如 HtmlAgilityPack 来解析它（如果您在 .net 中工作）：

• http://runtingsproper.blogspot.com/search/label/HtmlAgilityPack