JavaScript 修复坏的 html 标签

Question

我在 Sharepoint 网站上工作。我无权访问 Web 部件代码。我只能使用 JavaScript 更改母版页。

其中一个 Web 部件有一个错误。它改变了 <img>坏了SRC值(value)。

例子:

应该有

<img alt="img" src="http://www.apicture.png" style="margin:5px" /><br /><br />

但是有

<img alt="img" src="<a href="http://www.apicture.png">http://www.apicture.png</a>" style="margin:5px" /><br /><br />

我尝试匹配和替换，但 innerHtml 破坏了其他脚本。

如何用 JavaScript 修复我的问题？

编辑:

我有代码:

var markup = document.documentElement.innerHTML;
markup = markup.replace(/src=\".*?(http:\/\/[^\"]+)\"/g,'src=\"$1\"');
document.documentElement.innerHTML = markup;

但它破坏了我的网页。

Answer 1

由于 DOM 已经损坏，您需要退后一步并尝试挽救 HTML。

1) 找到损坏元素的父元素。在 document.body.innerHTML 中搜索和替换时可能会工作，you shouldn't really let regexes anywhere near large chunks of HTML .性能也是一个问题，尽管不是那么重要。

<img alt="img" src="<a href="http://...将被浏览器解析为源为“<a href=”的图像。

使用 jQuery，您可以简单地询问 $('img[src="<a href"]')获取图像。除了IE<8，你可以使用querySelectorAll使用相同的选择器。如果你没有jQuery，又想支持IE7，你需要使用getElementsByTagName手动过滤。

如果你真的很幸运，你可以通过getElementByID找到 parent (或等效的 jQuery)。

这是简单的部分。

---

2) 您的 HTML 未通过验证，浏览器已做出一些努力来修复它。你需要逆转这个过程。预测浏览器操作是有问题的，但让我们尝试一下。

让我们看看浏览器做了什么

<img src="<a href="http://www.test.com/img/image-20x20.png">http://www.test.com/img/image-20x20.png</a>" style="margin:5px" />​

这是 Chrome 和 Firefox 修复它的方式:

<img src="&lt;a href=" http:="" www.test.com="" img="" image-20x20.png"="">http://www.test.com/img/image-20x20.png" style="margin:5px" /&gt;

IE9 对img 内的属性进行排序按字母顺序排列在 innerHTML (o_0) 并且不会对 < 进行 HTML 转义在 src. IE7-8 额外剥离 =""来自属性。

图像属性将很难挽救，但文本内容不会受到伤害。无论如何，可以看到模式:

一切从<img开始直到 src=应该保留。不幸的是，在 IE 中，参数被重新排列，因此您还必须保留不正确的标签。 src="..."本身必须被删除。过去的一切在现代浏览器中都是 [不正确的]，但在 IE 中，适当的属性可能已经悄悄存在(反之亦然)。然后图片标签结束。

后面的所有内容都是真实的 URL，直到双引号。从双引号直到 HTML 转义 />是属于图像标签的属性。让我们希望它们不包含 HTML。 CSS 很好(对我们而言)。

---

3) 让我们构建正则表达式:一个开始的 IMG 标签，任何属性(让我们希望它们不包含 HTML)(捕获)，src属性及其特定值(转义或未转义)、任何其他属性(捕获)、标记结尾、URL(捕获)、更多属性(捕获)和 HTML 转义结束标记。

/<img([^>]*?)src="(?:<|\&lt\;)a href="([^>]*?)>([^"]+?)"(.*?)\/&gt;/gi

您可能对 how it's seen by RegexPal.com 感兴趣.

---

它应该被替换为:具有适当属性的图像连接在一起，并带有 src抢救。过滤属性可能是值得的，所以让我们选择回调替换。普通属性在其键中仅包含单词字符。更重要的是，普通属性通常是非空字符串(IMG 标签没有 bool 属性，unless you are using server-side maps)。这将匹配所有空属性但不是有效的属性键:/\S+(?:="")?(?!=)/

---

代码如下:

//forEach, indexOf, map need shimming in IE<9
//querySelectorAll cannot be reliably shimmed, so I'm not using that.

//author: Jan Dvorak
// https://stackoverflow.com/a/14157761/499214

var images = document.getElementsByTagName("img");
var parents = [];
[].forEach.call(images, function(i){
  if(
    /(?:<|\&lt\;)a href=/.test(i.getAttribute("src"))
    && !~parents.indexOf(i.parentNode)
  ){ 
    parents.push(i.parentNode)
  }
})

var re = /<img([^>]*?)src="(?:<|\&lt\;)a href="([^>]*?)>([^"]+?)"(.*?)\/&gt;/gi;
parents.forEach(function(p){
  p.innerHTML = p.innerHTML.replace(
    re, 
    function(match, attr1, attr2, url, attr3){
      var attrs = [attr1, attr2, attr3].map(function(a){
        return a.replace(/\S+(?:="")?(?!=)/g,"");
      }).join(" ");
      return '<img '+attrs+' src="'+url+'" />';
    }
  );
});

fiddle :http://jsfiddle.net/G2yj3/1/