Regex remove some elements from the style attribute

Question

I need to keep just a few properties of the style attribute in tags present in a string of an html document, they will be placed in a Whitelist, everything else will be removed. In the example below:

<TD class=xl76 style="BORDER-TOP: windowtext 0.5pt solid; HEIGHT: 15pt; BORDER-RIGHT: windowtext 0.5pt solid; WIDTH: 883pt; BORDER-BOTTOM: windowtext 0.5pt solid; BORDER-LEFT: windowtext 0.5pt solid; BACKGROUND-COLOR: transparent" height=20 width=1177 colSpan=25><FONT face=Calibri><STRONG>INDICADORES DO MÊS DE ABRIL DE 2016</STRONG></FONT></TD>

Would only keep the border and background and delete the rest of the column style:

<TD style="BORDER-TOP: windowtext 0.5pt solid; BORDER-RIGHT: windowtext 0.5pt solid; BORDER-BOTTOM: windowtext 0.5pt solid; BORDER-LEFT: windowtext 0.5pt solid; BACKGROUND-COLOR: red"><FONT face=Calibri><STRONG>INDICADORES DO MÊS DE ABRIL DE 2016</STRONG></FONT></TD>

I can isolate the style content with the following regex:

/(style=")([\s\S])(")/gi

But how to remove, maintain css?

Answer 1

If this attribute is with the correct syntax the safest is to interpret what is set and remove it by properties. By regex seems to me half blind and may have flaws. A suggestion:

var keepStyles = (function() {
    function getStyles(el) {
        var attr = el.getAttribute('style');
        return attr.split(';').map(function(chunk) {
            var rule = chunk.split(':').map(function(part) {
                return part.trim().toLowerCase();
            });
            return {
                type: rule[0],
                value: rule[1]
            };
        });
    }

    function setStyles(el,styles) {
        var string = styles.reduce(function(str, obj) {
            return str + [obj.type, obj.value].join(':') + ';';
        }, '');
        el.setAttribute('style', string);
    }
    return function(toKeep, el) {
        var current = getStyles(el);
        var keep = current.filter(function(obj) {
            return toKeep.indexOf(obj.type) != -1;
        });
        setStyles(el, keep);
    }
})();

So you generate a function that can receive an array with the styles to keep... and use so:

keepStyles(['border-top'], document.querySelector('td'));

Example: https://jsfiddle.net/L1pvo8or/

Answer 2

You can try to remove the other styles using replace, see the example below, in javascript:

style = "color: red; background: #000; position: fixed; top:0; left: 0;";
style.replace(/color:.*?;|top:.*?;|left:.*?;/g,"");

replace will remove: color, top and left;