1

これは以前に何百万回も尋ねられたことを知っているので、繰り返しの質問をお詫びしますが、これは私を狂わせています. 私はこれに何年も取り組んできましたが、どこにも行けないようです。

右または左に浮かんだ画像を含むいくつかのhtmlコードがあります。私がする必要があるのは、フローティングされているすべての画像を見つけ、フロートを削除してから、画像と同じようにフローティングされた div にラップすることです。

例えばから

<img src="images/imagepath1.jpg" border="0" alt="image 1" width="200" height="206" style="float: right;" />

に

<div class="imgContainer" style="float: right;"><img src="images/imagepath1.jpg" border="0" alt="image 1" width="200" height="206" /></div>

このコードを Notepad++ Find で使用しています

<img src="(.+)" border="([0-9]{1})" alt="(.*?)" width="([0-9]{2,3})" height="([0-9]{3})" style="float: (right|left);" />

と置換する

<div class="imgContainer" style="float: \6;"><img src="\1" border="\2" alt="\3" width="\4" height="\5" /></div>

問題は、タグと複数の画像を含む<p>コード ブロックで、コード ブロック全体を最初から最後まで強調表示することです。

例えば

<img src="images/imagepath1.gif" border="0" alt="image 1" width="207" height="119" style="float: right;" /><p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p><p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p><p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> <img src="images/imagepath2.jpg" border="0" alt="image2" width="96" height="141" style="float: left;" /><p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p><p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p><img src="images/imagepath3.gif" border="0" alt="image 3" width="72" height="108" style="float: right;" />

notepad++ では、これはブロック全体に一致します。それが私を夢中にさせている提案を提供できますか!

アダム

4

2 に答える 2

1

前方

最新バージョンの notepad++ を使用していることを確認してください。ここでは、notepad++ v5 以前で正規表現を使用する既知の問題が v6 で修正されています。

基本

ただし、次のような正規表現で HTML の処理が困難なエッジ ケースは多数あります。

  • 属性は、タグ内で任意の順序で表示できます
  • 属性の値は、次のような実際の属性のように見えることがあります。<img onmouseover=' src="TheseAreNotTheDroidsYouAreLookingFor.png" ; funImageSwap(src); ' src="DecoyDroids.png">
  • 属性値には、一重引用符を使用するか、二重引用符を使用しないことができます

あなたの式では、あなた.+をに変更することを検討してください[^"]+。これにより、正規表現エンジンが引用された領域またはタグを離れて、次の可能な一致に移動するのを防ぎます

<img src="([^"]+)" border="([0-9]{1})" alt="([^"]*?)" width="([0-9]{2,3})" height="([0-9]{3})" style="float: (right|left);" />

しかし、これは他のエッジケースを処理しません。

複雑

これらのエッジ ケースを回避するには、このモンスター表現を使用できます。私はそれを複数の行に分けて、理解しやすくするために何が起こっているかを示すためにここにコメントしました. ただし、メモ帳では、コメントとすべての新しい行を削除する必要があります。

正規表現 

<img(?=\s|>)
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\ssrc=('[^']*'|"[^"]*"|[^'"][^\s>]*)) # find src, capture value including quotes if they exist
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sborder=('[^']*'|"[^"]*"|[^'"][^\s>]*))  # find border, capture value including quotes if they exist
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\salt=('[^']*'|"[^"]*"|[^'"][^\s>]*)) # find alt, capture value including quotes if they exist
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\swidth=('[^']*'|"[^"]*"|[^'"][^\s>]*))   # find width, capture value including quotes if they exist
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sheight=('[^']*'|"[^"]*"|[^'"][^\s>]*))  # find height, capture value including quotes if they exist
(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sstyle="[^"]*(float:\s*(?:right|left)))  # find style, capture value including quotes if they exist
[^>]*>                      # actually capture the string

と置換する

<div class="imgContainer" style="$6;"><img src=$1 border=$2 alt=$3 width=$4 height=$5 /></div>

これは、メモ帳の例に挿入された 1 行の式です。私はメモ帳++ v6.3.3を使用しています

<img(?=\s|>)(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\ssrc=('[^']*'|"[^"]*"|[^'"][^\s>]*))(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sborder=('[^']*'|"[^"]*"|[^'"][^\s>]*))(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\salt=('[^']*'|"[^"]*"|[^'"][^\s>]*))(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\swidth=('[^']*'|"[^"]*"|[^'"][^\s>]*))(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sheight=('[^']*'|"[^"]*"|[^'"][^\s>]*))(?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sstyle="[^"]*(float:\s*(?:right|left)))[^>]*>

ここに画像の説明を入力

エキスパンド

  • <img画像タグに一致
  • (?=\s|>)イメージタグ名の後にスペースまたは閉じ山括弧が続くことを確認してください
  • (?=この特定のものは src 属性を見つけますが、考え方は他のすべてのものと同じです。先読みが満たされた後、正規表現エンジンは先読みが開始された場所に戻り、残りの式を続行するため、先読みにより、タグ内で属性を任意の順序で表示できます。
    • (?:非キャプチャ グループは、正規表現カーソルを文字列内で移動し、引用符で囲まれたすべての属性値をスキップします。これは、望ましい属性名と間違われる可能性のある属性値をバイパスする魔法です。
    • [^>=]右括弧または等号以外のすべての文字に一致
    • |また
    • ='[^']*'等号の後に一重引用符が続き、一重引用符内のすべてのテキストに一致し、一重引用符を閉じます
    • |また
    • ="[^"]*"等号の後に二重引用符が続き、二重引用符内のすべてのテキストと二重引用符を閉じる
    • |また
    • =[^'"][^\s>]*等号の後に引用符以外の文字が続き、その後にスペースまたは閉じ山括弧ではない任意の数の文字が続きます
    • )*?非キャプチャ グループを閉じて、必要な回数だけ繰り返すことができます。キャプチャはタグを離れないため、次の条件が満たされない場合、この特定のタグは探しているタグではありません
  • \ssrc=に続くスペースに一致しsrc=ます。上記の非キャプチャ グループのおかげで、これは属性名のみにすることができます
  • (キャプチャ グループを開始すると、src 属性の値が取得されます
    • '[^']*'等号の後に一重引用符が続き、一重引用符内のすべてのテキストに一致し、一重引用符を閉じます
    • |また
    • "[^"]*"等号の後に二重引用符が続き、二重引用符内のすべてのテキストと二重引用符を閉じる
    • |また
    • [^'"][^\s>]*等号の後に引用符以外の文字が続き、その後にスペースまたは閉じ山括弧ではない任意の数の文字が続きます
    • )キャプチャ グループを閉じる
  • )先読みを閉じる
  • これらの次の先読みはすべて、上記の src と同じロジックに従います
    • (?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sborder=('[^']*'|"[^"]*"|[^'"][^\s>]*))境界線を見つけ、存在する場合は引用符を含む値を取得します
    • (?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\salt=('[^']*'|"[^"]*"|[^'"][^\s>]*))alt を検索し、存在する場合は引用符を含む値を取得します
    • (?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\swidth=('[^']*'|"[^"]*"|[^'"][^\s>]*))幅を見つけ、存在する場合は引用符を含む値を取得します
    • (?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sheight=('[^']*'|"[^"]*"|[^'"][^\s>]*))高さを見つけ、存在する場合は引用符を含む値を取得します
    • (?=(?:[^>=]|='[^']*'|="[^"]*"|=[^'"][^\s>]*)*?\sstyle="[^"]*(float:\s*(?:right|left)))スタイルを見つけて、値を取得するこれは、実際の属性値がどのように一致するかにより、わずかに異なります
  • [^>]*>残りの img タグと閉じ括弧を一致させます。これにより、正規表現エンジンが、別の img タグと間違われる可能性のある値を持つ可能性のある含まれる属性を誤って検出するのを防ぎます。
于 2013-07-07T16:15:40.483 に答える
1

あなたが思いついた正規表現の検索/置換から1文字だけ離れた正しい道を進んでいると思います。

これはあなたの現在の発見です：

<img src="(.+)" border="([0-9]{1})" alt="(.*?)" width="([0-9]{2,3})" height="([0-9]{3})" style="float: (right|left);" />

次のように変更します。

             v

<img src="(.+?)" border="([0-9]{1})" alt="(.*?)" width="([0-9]{2,3})" height="([0-9]{3})" style="float: (right|left);" />

はv、現在欠落している 1 人のキャラクターを紹介した場所を示しています。これを.+怠惰にすると、全体の単一の置換ではなく、正しい置換を取得できるはずです。

そうは言っても、そのような場合[^"]は代わりに使用することをお勧めし.ます。

于 2013-07-07T17:09:45.847 に答える