CODEWITHSUNDEEP
javascriptregex
Avatar
Avatar

Reputation: 15196

RegEx to remove all styles but leave color and background-color if they exist

I am still not able to use regular expressions by heart, thus could not find a final solution to strip out all styles from <p style="">...</p> using RegEx with Javascript, but leave color and background-color if they exist.

What I found:

1. Remove complete style="..." element with RegEx: 

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


2. Remove certain styles with RegEx: 

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


Challenge: In case, we remove all styles assigned (no color exists), and style is empty (we have style="" or style=" "), the style attribute should be removed as well.

I guess we need two lines of code?

Any help appreciated!


Example 1 (whitelisted "color" survives): 

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

should become: 

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


Example 2 (all styles die): 

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

should become: 

<p>example</p>

Upvotes: 4

Views: 5609

Answers (2)

Mohamad Hamouday
Mohamad Hamouday

Reputation: 2783

You can accomplish this without using Regex by using this function

function filter_inline_style(text){
    var temp_el = document.createElement("DIV");
    temp_el.innerHTML = text;
    var el            = temp_el.firstChild;
    console.log("el", el);

    // Check if text contain html tags
    if(el.nodeType == 1){
        var background = el.style.backgroundColor;
        var color      = el.style.color;

        el.removeAttribute('style');
        el.style.backgroundColor = background;
        el.style.color           = color;
        return el.outerHTML
    }

    return temp_el.innerHTML;
}

To use it:

var text = '<p style="font-size:8px;line-height:14px;color:#FF0000;background-color: red">example</p>';
var clean_text = filter_inline_style(text);
console.log(clean_text); 
// output: <p style="background-color: red; color: rgb(255, 0, 0);">example</p>

Upvotes: 1

Andrew Cheong
Andrew Cheong

Reputation: 30293

First, the proof of concept. Check out the Rubular demo.

The regex goes like this:

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

Broken down, it means:

(<[^>]+\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).
)

Now, the replacement,

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

should always construct what you expect to have left!

The trick here, in case it's not clear, is to put the "negative" case first, so that only if the negative case fails, the captures (such as the style attribute itself) would be populated, by, of course, the alternate case. Otherwise, the captures default to nothing, so not even the style attribute will show up.

To do this in JavaScript, do this:

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       : '');
    }

);

Note that I'm doing this for fun, not because this is how this problem should be solved. Also, I'm aware that the semicolon-capture is hacky, but it's one way of doing it. And one can infer how to extend the whitelist of styles, looking at the breakdown above.

Upvotes: 3

Related Questions