How to minify HTML with PHP without affecting <pre> and <textarea> tags?

Asked

Viewed 111 times

1

When trying to minify an HTML with the function below, I have problems with tags that preserve the spacing shown in the code.

The function is as follows:

function compressHtml( $buffer ) {
    if( $this->_app->getEnvironment() == 'development' ) {
        return $buffer;
    }
    $pattern = array(
        '/\>[^\S ]+/s',         // limpando espaços em branco antes das tags
        '/[^\S ]+\</s',         // limpando espaços em branco depois das tags
        '/(\s)+/s',             // diminuindo espaços repetidos para um apenas
        '/<!--(.|\s)*?-->/',    // retirando comentários do HTML
        '#(?://)?<!\[CDATA\[(.*?)(?://)?\]\]>#s' // deixando CDATA sozinho
    );
    $replacement = array(
        '>',
        '<',
        '\\1',
        '',
        "//<![CDATA[\n".'\1'."\n//]]>"
    );
    $html = preg_replace( $pattern, $replacement, $buffer );
    return trim( $html );
}

After that I already use GZIP to compress and I have knowledge of libraries that do this work, however I wanted something manual so I didn’t have to deal with many library dependencies.

1 answer

1


The function that is displayed can be replaced by the one below, but care needs to be taken with CSS and Javascript inline.

function compressHtml($buffer)
{
    // Iniciando variáveis para busca de tags
    $foundTxt = null;
    $foundPre = null;
    $foundCode = null;
    $foundScript = null;

    // Procurando tags textarea, pre, code e script
    preg_match_all('#\<textarea.*\>.*\<\/textarea\>#Uis', $buffer, $foundTxt);
    preg_match_all('#\<pre.*\>.*\<\/pre\>#Uis', $buffer, $foundPre);
    preg_match_all('#\<code.*\>.*\<\/code\>#Uis', $buffer, $foundCode);
    preg_match_all('#\<script.*\>.*\<\/script\>#Uis', $buffer, $foundScript);

    // Substitui o canteúdo da tags por uma palavra chave, assim
    // o conteúdo pode ser posto novamente intacto no lugar.
    // Exemplo: <textarea>$index</textarea> / <pre>$index</pre>
    $buffer = str_replace($foundTxt[0], array_map(function($el){ return '<textarea>'.$el.'</textarea>'; }, array_keys($foundTxt[0])), $buffer);
    $buffer = str_replace($foundPre[0], array_map(function($el){ return '<pre>'.$el.'</pre>'; }, array_keys($foundPre[0])), $buffer);
    $buffer = str_replace($foundCode[0], array_map(function($el){ return '<code>'.$el.'</code>'; }, array_keys($foundCode[0])), $buffer);
    $buffer = str_replace($foundScript[0], array_map(function($el){ return '<script>'.$el.'</script>'; }, array_keys($foundScript[0])), $buffer);

    // Minifica o html
    $search = array(
        '/\>[^\S ]+/s',         // Limpando espaços em branco antes das tags
        '/[^\S ]+\</s',         // Limpando espaços em branco depois das tags
        '/(\s)+/s',             // Siminuindo espaços repetidos para um apenas
        '/<!--(.|\s)*?-->/',    // Eetirando comentários do HTML
        '#(?://)?<!\[CDATA\[(.*?)(?://)?\]\]>#s' // Deixando CDATA em linhas separadas
    );

    $replace = array(
        '>',
        '<',
        '\\1',
        '',
        "//<![CDATA[\n".'\1'."\n//]]>"
    );

    $buffer = preg_replace($search, $replace, $buffer);

    // Replacing back with content
    $buffer = str_replace(array_map(function($el){ return '<textarea>'.$el.'</textarea>'; }, array_keys($foundTxt[0])), $foundTxt[0], $buffer);
    $buffer = str_replace(array_map(function($el){ return '<pre>'.$el.'</pre>'; }, array_keys($foundPre[0])), $foundPre[0], $buffer);
    $buffer = str_replace(array_map(function($el){ return '<code>'.$el.'</code>'; }, array_keys($foundCode[0])), $foundCode[0], $buffer);
    $buffer = str_replace(array_map(function($el){ return '<script>'.$el.'</script>'; }, array_keys($foundScript[0])), $foundScript[0], $buffer);

    return $buffer;
}

This is not the best solution, but it is the basic process.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.