JavaScript修复坏的HTML标签

Question

我正在使用Sharepoint网站.我无权访问webparts代码.我只能用JavaScript更改母版页.

其中一个webpart有一个bug.它改变了<img>一个坏的SRC值.

例:

应该有

<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可能会起作用,但你不应该让正则表达式放在大块的HTML附近.性能也是一个问题,尽管是较小的一个.

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

使用jQuery,您可以简单地要求$('img[src="<a href"]')获取图像.除IE <8外,您可以使用querySelectorAll相同的选择器.如果您没有jQuery,并且想要支持IE7,则需要使用getElementsByTagName手动过滤.

如果你真的很幸运,你可以通过getElementByID(或等效的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)中按字母顺序对属性进行排序,而不是<在src 中对HTML进行转义.IE7-8还=""从属性中剥离.

图像属性很难挽救,但文本内容没有受到伤害.无论如何,可以看到模式:

应该保留从开始<img到开始的所有内容src=.不幸的是,在IE中,参数被重新排列,因此您还必须保留不正确的标记.src="..."本身必须删除.在现代浏览器中,过去的所有内容都是[不正确],但在IE中,正确的属性可能会在那里悄然发生(反之亦然).然后图像标签结束.

接下来的一切都是真正的URL,直到双引号.从双引号到HTML转义/>是属于图像标记的属性.我们希望它们不包含HTML.CSS很好(为了我们的目的).

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

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

您可能对RegexPal.com的看法感兴趣.

它应该被替换为:具有适当属性连接的图像,以及被src抢救的图像.过滤属性可能是值得的,所以让我们选择回调替换.普通属性的键中只包含单词字符.更重要的是,普通属性通常是非空字符串(IMG标记没有布尔属性,除非您使用服务器端映射).这将匹配所有空属性但不匹配有效的属性键:/\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+'" />';
    }
  );
});

小提琴:http://jsfiddle.net/G2yj3/1/