4

私はまだ正規表現を心から使用することができないため、Javascript で RegEx を使用して <p style="">...</p> からすべてのスタイルを削除する最終的な解決策を見つけることができませんでしたが、色と背景を残します-色が存在する場合。

私が見つけたもの：

1. RegEx で完全な style="..." 要素を削除します。 

htmlString = (htmlString).replace(/(<[^>]+) style=".*?"/i, '');


2. RegEx で特定のスタイルを削除します。 

htmlString = (htmlString).replace(/font-family\:[^;]+;?|font-size\:[^;]+;?|line-height\:[^;]+;?/g, '');


課題: 割り当てられたすべてのスタイルを削除し (色が存在しない)、スタイルが空である (style="" または style=" " がある) 場合、style 属性も削除する必要があります。

2行のコードが必要だと思いますか?

どんな助けでも大歓迎です！


例 1 (ホワイトリストに登録された「色」が残る): 

<p style="font-family:Garamond;font-size:8px;line-height:14px;color:#FF0000;">example</p>

なる必要があります:

<p style="color:#FF0000;">example</p>


例 2 (すべてのスタイルが死ぬ): 

<p style="font-family:Garamond;font-size:8px;line-height:14px;">example</p>

なる必要があります:

<p>example</p>
4

1 に答える 1

3

まず、概念実証。Rubular のデモをご覧ください。

正規表現は次のようになります。

/(<[^>]+\s+)(?:style\s*=\s*"(?!(?:|[^"]*[;\s])color\s*:[^";]*)(?!(?:|[^"]*[;\s])background-color\s*:[^";]*)[^"]*"|(style\s*=\s*")(?=(?:|[^"]*[;\s])(color\s*:[^";]*))?(?=(?:|[^"]*)(;))?(?=(?:|[^"]*[;\s])(background-color\s*:[^";]*))?[^"]*("))/i

分解すると、次のようになります。

(<[^>]+\s+)                           Capture start tag to style attr ($1).

(?:                                   CASE 1:

    style\s*=\s*"                     Match style attribute.

    (?!                               Negative lookahead assertion, meaning:
        (?:|[^"]*[;\s])               If color found, go to CASE 2.
        color\s*:[^";]*
    )

    (?!
        (?:|[^"]*[;\s])               Negative lookahead assertion, meaning:
        background-color\s*:[^";]*    If background-color found, go to CASE 2.
    )

    [^"]*"                            Match the rest of the attribute.

|                                     CASE 2:

    (style\s*=\s*")                   Capture style attribute ($2).

    (?=                               Positive lookahead.
        (?:|[^"]*[;\s])
        (color\s*:[^";]*)             Capture color style ($3),
    )?                                if it exists.

    (?=                               Positive lookahead.
        (?:|[^"]*)                    
        (;)                           Capture semicolon ($4),
    )?                                if it exists.

    (?=                               Positive lookahead.
        (?:|[^"]*[;\s])
        (background-color\s*:[^";]*)  Capture background-color style ($5),
    )?                                if it exists.

    [^"]*(")                          Match the rest of the attribute,
                                      capturing the end-quote ($6).
)

さて、交換品ですが、

\1\2\3\4\5\6

残っていると予想されるものを常に構築する必要があります。

ここでの秘訣は、明確でない場合に備えて、「負の」ケースを最初に配置することです。これにより、負のケースが失敗した場合にのみ、キャプチャ (スタイル属性自体など) が、もちろん代替によって取り込まれます。場合。それ以外の場合、キャプチャはデフォルトで何も表示されないため、スタイル属性も表示されません。

JavaScript でこれを行うには、次のようにします。

htmlString = htmlString.replace(

    /(<[^>]+\s+)(?:style\s*=\s*"(?!(?:|[^"]*[;\s])color\s*:[^";]*)(?!(?:|[^"]*[;\s])background-color\s*:[^";]*)[^"]*"|(style\s*=\s*")(?=(?:|[^"]*[;\s])(color\s*:[^";]*))?(?=(?:|[^"]*)(;))?(?=(?:|[^"]*[;\s])(background-color\s*:[^";]*))?[^"]*("))/gi,

    function (match, $1, $2, $3, $4, $5, $6, offset, string) {
        return $1 + ($2 ? $2       : '') + ($3 ? $3 + ';' : '')
                  + ($5 ? $5 + ';' : '') + ($2 ? $6       : '');
    }

);

これがこの問題を解決する方法であるからではなく、楽しみのためにこれを行っていることに注意してください。また、セミコロン キャプチャがハックであることは承知していますが、これは 1 つの方法です。上記の内訳を見ると、スタイルのホワイトリストを拡張する方法を推測できます。

于 2012-09-13T21:27:42.343 に答える