1

ブラウザーにレンダリングされるすべての html ページを保持する変数 ($output) を php に持っていますが、lazyload js を機能させるには、すべての画像 src を data:image に置き換える必要があります。

要件は次のとおりです。

  • img src は同じ構造ではありません。

    <img src="img.jpg" alt='' />

    <img alt="text" src='img.gif'>

    <img class="myclass" src="img.png" alt='' />

    ...など

  • <body {can have optional text}> と </body> の間にある画像のみを置き換えたい

  • <script {optional text here}> と </script> の間の img タグを置き換えないでください

ありがとう

4

1 に答える 1

0

多くの人が正規表現で犯す間違いは、すべてを行う巨大な正規表現を 1 つ書こうとすることです。この方法は狂気です。(問題によっては) 不可能であるだけでなく、複雑で、醜く、壊れやすいものになります。物事を扱いやすいステップに分割する方がはるかに優れています。

<img>内のタグだけを置き換えたいとおっしゃっていますが、タグが有効な<body>場所は 内だけなので無視します。の外側のタグを本当に無視する必要がある場合は、全体をさらに別のタグでラップして、入力から を抜き出すことができます。<img><body><img><body>preg_replace_callback<body>

したがって、私が採用したアプローチは、2 つの正規表現を使用することです。1 つは<img>入力内のタグのすべてのインスタンスに一致するもので、もう 1 つは属性を置き換えるaltものです。これを達成するために、私は以下を使用しますpreg_replace_callback:

$output = preg_replace_callback( '/<img .*?>/', function($matches) {
        return preg_replace( '/\bsrc\s*=\s*[\'"](.*?)[\'"]/', 
            'data-image="$1"', $matches[0] );
}, $input );

?反復メタ文字での遅延量指定子の使用に注意してください。これがないと*、2 つの連続<img>するタグが 1 つの大きなタグとして扱われ、これは望ましくありません。置換関数では、属性を探してsrc属性に置き換えdata-imageます。

このソリューションが失敗する場所は次のとおりです。

  • 引用符で区切られたsrc属性 ( <img src="what's_up_doc.jpg">) またはその逆にアポストロフィがある場合。これを解決する必要がある場合は、二重引用符で囲まれた属性を処理するための正規表現と、単一引用符で囲まれた属性を処理するための正規表現の 2 つの異なる置換正規表現が必要になります。
  • <img>タグが複数行にまたがる場合。これが問題になる場合は、外側の正規表現で[^]代わりに使用して、改行を含む.すべてに一致させることができます。
于 2013-07-07T20:48:21.200 に答える