Documentation

Replacing data within outputted HTML using DOMDocument and DOMXPath

Posted in: Getting Started (3) Plugin Options Explained (32) Actions / Filters (24) How To (8)      Html Content (5)    Replace (10)  

Plugin provide multiple options to control outputted HTML data, however giving the complexity of existing WordPress themes and plugins, sometimes certain area may not be covered. In such cases you can extend plugin functionality (see Create a custom Module Component, extending the plugin functionality), or through filters wph/ob_start_callback which would be the easiest way.

HTML data processing through DOMDocument and DOMXPath is a powerful method to control everything on the outputted code, which ensure is also a valid markup. This is a basic example on how to parse the buffer into a DOMDocument and then DOMXPath object


        add_filter( 'wph/ob_start_callback', 'custom_ob_start_callback' ); 
    function custom_ob_start_callback( $buffer )
        {( ! class_exists( 'DOMDocument', false ) )
                return $buffer;

            $doc = new DOMDocument();
            $doc->preserveWhiteSpace    = true;( @$doc->loadHTML(mb_convert_encoding($buffer, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD) === false )
                return $buffer;
            
            $doc->encoding              = 'UTF-8';
            $doc->formatOutput          = true;$xpath = new DOMXPath($doc);//search and iteration area
            
            $doc->normalizeDocument();
            
            $buffer =   $doc->saveHTML( $dom->documentElement );
                
            return $buffer;
               
        }

Presuming we need a class ‘envato’ replaced for all instances within HTML, we can use the following code:


        add_filter( 'wph/ob_start_callback', 'custom_ob_start_callback' ); 
    function custom_ob_start_callback( $buffer )
        {( ! class_exists( 'DOMDocument', false ) )
                return $buffer;

            $doc = new DOMDocument();
            $doc->preserveWhiteSpace    = true;( @$doc->loadHTML(mb_convert_encoding($buffer, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD) === false )
                return $buffer;
            
            $doc->encoding              = 'UTF-8';
            $doc->formatOutput          = true;$xpath = new DOMXPath($doc);$nodes = $xpath->query('//*[contains(concat(" ", normalize-space(@class), " "), " envato ")]');
            if($nodes->length < 1)
                return $buffer;($nodes as $node) 
                {
                    $class  =   $node->getAttribute('class');
                    $class  =   str_replace('envato', '', $class);
                    $class  =   trim($class);
                    
                    $node->attributes->getNamedItem("class")->nodeValue = $class;
                }
            
            $doc->normalizeDocument();
            
            $buffer =   $doc->saveHTML( $dom->documentElement );
                
            return $buffer;
               
        }

DOMXPath is a powerful engine to traverse and query HTML similar to the way things are done in JavaScript and CSS. More details can be found at The DOMXPath class

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Scroll to top