1

Eu preciso manter apenas algumas propriedades do atributo style em tags presentes numa string de um documento html, os mesmos serão colocados em uma whitelist, todo o resto será removido. No exemplo abaixo:

<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>

Iria manter apenas o border e o background e excluir o restante do style da coluna:

<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>

Eu consigo isolar o conteúdo do style com a seguinte regex:

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

Mas como remover, manter o css?

2 Respostas 2

4

Se esse atributo está com a sintaxe correta o mais seguro é interpretar o que está setado e remover isso por propriedades. Por regex parece-me meio cego e pode ter falhas. Uma sugestão:

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);
    }
})();

Assim geras uma função que pode receber uma array com os estilos a manter... e usar assim:

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

Exemplo: https://jsfiddle.net/L1pvo8ou/

1
  • Suas respostas com JS sempre me surpreendem, aprendo muito com elas :D Commented 29/06/2016 às 12:41
0

Você pode tentar remover os outros estilos utilizando replace, veja o exemplo abaixo, em javascript:

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

O replace removerá: color, top e left;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .