1

私はSharepoint Webサイトで作業しています。Web パーツ コードにアクセスできません。JavaScript でのみマスター ページを変更できます。

Web パーツの 1 つにバグがあります。<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;

しかし、それは私のウェブページを壊しました。

4

2 に答える 2

5

DOMはすでに壊れているので、一歩下がってHTMLを回収する必要があります。

1）壊れた要素の親を見つけます。内部の検索と置換document.body.innerHTMLはおそらく機能しますが、HTMLの大きなチャンクの近くに正規表現を実際に配置するべきではありません。パフォーマンスも重要ですが、それほど重要ではありません。

<img alt="img" src="<a href="http://...ソースが""の画像としてブラウザによって解析され<a href=ます。

jQueryを使用すると、画像の取得を要求するだけで済みます$('img[src="<a href"]')。querySelectorAllIE <8を除いて、同じセレクターで使用できます。jQueryがなく、IE7をサポートしたい場合はgetElementsByTagName、手動フィルタリングで使用する必要があります。

運が良ければ、getElementByID（または同等のjQuery）を介して親を見つけることができます。

これは簡単な部分です。

2）HTMLが検証されておらず、ブラウザはすでに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は、（o_0）内の属性をimgアルファベット順にソートし、 src内をinnerHTMLHTMLエスケープしません。<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/

于 2013-01-04T13:06:03.157 に答える
1

正規表現で属性を修復できsrcますが、ページ全体は修復されません。その理由は、Web ブラウザーがそのような不適切な HTML を解析しようとして、JS が実行される前に奇妙な出力 (余分な要素など) を生成するためです。HTML 解析/レンダリング エンジンに干渉することはできないため、元のコンテンツを変更してこれを修正する以外に合理的な方法はありません。

于 2013-01-04T11:11:33.293 に答える