5

Eu preciso retornar todas as classes encontradas dentro de uma string CSS, de modo que quando a expressão fosse conflitada com:

div.classe1{/*...*/}
.classe2 div a{/*...*/}
.classe3.classe4{/*...*/}
.classe5{/*...*/}

Retornasse em um array (com ou sem os pontos antes do nome da classe, tanto faz):

["classe1","classe2","classe3","classe4","classe5"]

O que tentei até o momento foi este código:

\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})

Mas aparentemente não funcionou muito bem...

Segue um FIDDLE para melhor entendimento.

3
  • 1
    Tem que ser com expressões regulares? Só aparecer um /* a classe .azul deixa o texto #123 */ no código e muitas delas falham. Commented 24/02/2014 às 20:36
  • Como essa expressão regular será usada? Com um único match como no fiddle de exemplo, ou pode-se alterar o código? Regex não é a ferramenta ideal nesse caso, mas dependendo das limitações pode-se pensar em alguma coisa...
    – mgibsonbr
    Commented 24/02/2014 às 21:10
  • @mgibsonbr Qualquer solução javascript é válida, não importando como é implementada.
    – Kazzkiq
    Commented 24/02/2014 às 21:38

5 Respostas 5

5

Minha sugestão é usar um parser de CSS completo, como o JSCSSP, e extrair as classes dos seletores individuais (em vez do texto do CSS inteiro).

function extrairClasses(css) {
    var classes = [];

    var parser = new CSSParser();
    var sheet = parser.parse(css, false, true);
    for ( var i = 0 ; i < sheet.cssRules.length ; i++ ) {
        var seletor = sheet.cssRules[i].mSelectorText;
        if ( seletor )
            classes = classes.concat(seletor.match(/\.\w+/g));
    }

    return classes;
}

Exemplo no jsFiddle. Note que ele funciona mesmo na presença de casos "degenerados", como um comentário contendo " ou uma string contendo /* (e ambos contendo .classe).

1

Segue implementação em JS puro:

var texto = "div.classe1{background:red}.classe2 div a{background:#00f}.classe3.classe4{background:green}.classe5{background:#ff0}";

var retorno = texto.match(/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})/ig); //[".classe1", ".classe2", ".classe3", ".classe4", ".classe5"]

Note a inclusão de /ig ao final que pesquisa toda a string (não apenas a primeira ocorrência) em case insensitive.

9
  • vc pode substituir [_a-zA-Z] por [_A-z] que torna case incentive e fica menor o tamanho da regexp. :) Commented 24/02/2014 às 21:58
  • @GabrielGartz A-z? Essa pra mim é novidade. Consegue demonstrar funcionando?
    – Largato
    Commented 28/09/2014 às 2:40
  • @Bacco testei pelo regexpal.com e realmente funciona: \.(-?[_A-z]+[_A-z0-9-]*)(?![^\{]*\}) Commented 29/09/2014 às 12:55
  • 2
    @TiagoCésarOliveira Acho que você não entendeu, A-z está errado porque pega clas[se1 { ... } e mais um monte de porcaria, pois entre o Z maiúsculo e o a minúsculo tem caracteres especiais, e A-z inclui todos estes. Funciona só no sentido de pegar o que você quer no seu teste, mas pega coisa indesejada também. Barra invertida, colchetes etc.
    – Largato
    Commented 29/09/2014 às 13:04
  • 2
    Para ser mais exato, tem isso aqui entre Z e a: [ \ ] ^ _ ` - Veja numa tabela ASCII
    – Largato
    Commented 29/09/2014 às 13:09
1

Pensando em tratar a questão de comentários e hacks que começam com ponto, pensei na seguinte função:

function parseClasses(cssSource) {

    //remove comentários
    var semComentarios = cssSource.replace(/\/\*([\s\S]*?)\*\//g, '');

    //remove blocos com a formatação
    var semBlocos = semComentarios.replace(/{\s*[^}]*\s*}/g, '');

    //recupera classes no que restou
    return semBlocos.match(/\.-?[_a-zA-Z]+[_a-zA-Z0-9-]*/g)

}

Exemplo de uso:

var classes = parseClasses(str);
for (var i = 0; i < classes.length; i++) {
    console.log(classes[i])
}

Demo no jsfiddle

2
  • 2
    Embora a proposta seja interessante, nada substitui um parse completo. Por exemplo, um comentário pode conter aspas nele (/* " */) e uma string (por exemplo, em content) pode conter barra-asterisco nela (" /* "). Qualquer um que você tentar substituir primeiro vai quebrar o outro (a menos que você os combine num regex único).
    – mgibsonbr
    Commented 24/02/2014 às 21:24
  • 1
    @mgibsonbr Bem lembrado. Regex não é solução para tudo.
    – utluiz
    Commented 24/02/2014 às 21:26
0

Usando expressões regulares, /([^{]+)\s*\{[^}]*}/ satisfaz todos os seletores e /\.(-?[a-z_]+[a-z0-9-_]*)/ todas as classes. Exemplo:

var style = ".class1 { text-align: left; font-weight: bold} " +
            "/* -- Comment -- */" +
            ".class2.class3 { border: 1px solid #a1a1a1 } " +
            "textarea.class4 { height: 400px } " +
            ".class5 ~ .class6 { display: none } " +
            ".class7 .class8:first-child { color: #ababab } ";
function parseCss(stylesheet) {
    var stylesheetPattern = /([^{]+)\s*\{[^}]*}/gm,
        selectorPattern = /\.(-?[a-z_]+[a-z0-9-_]*)/ig,
        classes = new Array(),
        selector, match;
    stylesheet = stylesheet.replace(/(\/\*.*(?!=\*\/)\*\/)/gm, "");
    while(match = stylesheetPattern.exec(stylesheet)) {
        while(selector = selectorPattern.exec(match[1])) {
            classes.push(selector[1]);
        }
    }
    return classes;
}
parseCss(style);

Neste caso, parseCss() retorna [ "class1", "class2", "class3", "class4", "class5", "class6", "class7", "class8" ].

0

Podemos analisar string caractere por caractere para eliminar classes que fiquem dentro de comentários /* .classe */, é a melhor forma de se extrair todas as classes CSS de uma string.

$string = <<<EOF
div.classe1{/*comentario div.classe1b*/}
div.-classe2{/*div.-classe2b*/}
div._classe3{/*div._classe3b*/}
.classe4 div a{/*.classe4b div a*/}
.classe5.classe6{/*.classe5b.classe6b*/}
.classe7{/*......classe7b......*/}
.classe8{esse aqui nao tem comentarios mas tambem nao pega o .classe8b pois esta dentro das chaves}
.cl{/*.clb 2 caracteres*/}
.c{/*.cb 1 caractere*/}
.d{/*.db 1 caractere*/}
EOF;

$length = strlen( $string );

$brackets = false;
$comment = false;
$dot = false;
$class = '';
$classes = array();

for ( $i = 0, $j = 0; $i < $length; $i++ ) {
  if ( $string[ $i ] === "\x2f" && $string[ $i + 1 ] === "\x2a" ) {
    $comment = true;
    continue;
  } else if ( $string[ $i ] === "\x7b" ) {
    $brackets = true;
    continue;
  } else if ( $brackets === false && $comment === false && $string[ $i ] === "\x2e" ) {
    $dot = true;
    continue;
  } else if ( $string[ $i ] === "\x2a" && $string[ $i + 1 ] === "\x2f" ) {
    $comment = false;
    continue;
  } else if ( $brackets === true && $string[ $i ] === "\x7d" ) {
    $brackets = false;
    continue;
  }
  if ( $dot ) {
    $j = $i + 1;
    $k = $j;
    if ( ( ( $string[ $i ] >= "\x41" && $string[ $i ] <= "\x5a" ) || ( $string[ $i ] >= "\x61" && $string[ $i ] <= "\x7a" ) || ( $string[ $i ] === "\x2d" ) || ( $string[ $i ] === "\x5f" ) ) === false ) {
      $class = '';
      $dot = false;
      continue;
    }
    $class = $string[ $i ];
    while ( ( $string[ $j ] >= "\x30" && $string[ $j ] <= "\x39" ) || ( $string[ $j ] >= "\x41" && $string[ $j ] <= "\x5a" ) || ( $string[ $j ] >= "\x61" && $string[ $j ] <= "\x7a" ) || ( $string[ $j ] === "\x2d" ) || ( $string[ $j ] === "\x5f" ) ) {
      $class .= $string[ $j ];
      $j++;
    }
    array_push( $classes, $class );
    $class = '';
    $dot = false;
    $i = $j - 1;
  }
}

echo '<pre style="font-size: 14px; font-family: Consolas; line-height: 20px; tab-size: 4;">';
var_export( $classes );
echo '</pre>';
die();

O resultado obtido da função var_export é o array com todas as classes, e como o objetivo é remover classes que venham a estar presente dentro de comentários, então isso é alcançado com sucesso e além disso também são removidas classes que existam por qualquer motivo que seja dentro de chaves (talvez isso não funcione bem com @media css), mas eu adicionei isso por último pois estou presumindo que seu código seja um código "normal" sem @media css, caso haja presença de @media basta remover as partes referentes aos brackets, no código original que elaborei não tinha o brackets, adicionei agora por último.

Elaborei o código agora depois de ler a pergunta, fiz testes rápidos então não asseguro que está funcionando 100%, mas está extraindo classes que começam com - ou _ ou a-z ou A-Z e procedido ou não de de - ou _ ou a-z ou A-Z ou 0-9.

array (
  0 => 'classe1',
  1 => '-classe2',
  2 => '_classe3',
  3 => 'classe4',
  4 => 'classe5',
  5 => 'classe6',
  6 => 'classe7',
  7 => 'classe8',
  8 => 'cl',
  9 => 'c',
  10 => 'd',
)

P.S: Sei que a categoria é Javascript e o código publicado é PHP, mas fiz questão de responder pelo fato de ser a resposta correta para a sua pergunta e a que obtém os melhores resultados, e também pelo fato da semelhança na sintaxe e funções PHP e JS, para "converter" para Javascript, serão necessárias apenas adaptações mínimas. Espero ter ajudado.

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 .