Filtering HTML Content Before Loading to Page using PHP Tutorial

Submitted by oretnom23 on Tuesday, January 10, 2023 - 16:39.

In this tutorial, you will learn how to Filter HTML Content before loading or displaying it on the page using PHP Language. The tutorial aims to provide the IT/CS students and new PHP programs with a reference to learn to enhance their knowledge and programming capabilities using the PHP Language. Here, I will provide some snippets and a sample source code that demonstrate the goal of this tutorial.

What is Content Filtering?

Content Filtering is also known as Web Content Filtering which is a set of solutions for monitoring, altering, or analyzing page content. This kind of solution or feature is mostly used in some Content Management System platforms such as WordPress which allows the site users to filter and alter the page or article content before displaying it.

How can we Achieve Content Filtering using PHP?

Using PHP Language, we can simply read the HTML content even displaying it on the page yet using the ob_start() and ob_get_clean() so we could do something with the content before loading it on the page. See the example below for a better idea.

    <?php
    ob_start();
    ?>
    <!-- HTML Content to Filter before loading to Page -->
    <div>
        <h1>Hello World!!!</h1>
    </div>
    <!-- End of HTML Content to Filter before loading to Page -->
 
    <?php 
    // HTML content that can be alter
    $content = ob_get_clean();
 
    $altered_content = "{$content}\n<p>This is a sample additional content added to html content</p>";
 
 
    //Load the Filtered HTML Content to Page 
    echo $altered_content;
    ?>

The snippet above demonstrates a simple way to filter the HTML content and alter the content before showing it.

Sample Application Source Code

Here are the scripts of a simple web application that demonstrate also Content Filtering using PHP. Follow the instructions so you can run it also on your end. Although, I also provided some snapshots of the results of the application.

First, create a new directory named pages inside your source code root folder. Save the following HTML Files.

about.html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed faucibus lacus. Quisque sagittis imperdiet viverra. Fusce ac nulla pretium velit ultricies ultricies. In hac habitasse platea dictumst. Cras risus lacus, iaculis eu metus non, <b>rutrum</b> mollis nulla. Vestibulum semper vitae eros pellentesque dapibus. Nulla blandit fermentum faucibus. <b><span style="color:red">Donec nec lobortis</span> diam</b>. Etiam ultrices lectus vulputate velit molestie, eu hendrerit quam auctor. Nullam ex lorem, tincidunt eget euismod ac, <em>euismod vel ligula</em>. Aliquam venenatis mollis massa et bibendum.</p>
 
<img src="./images/img1.jpg" alt="Sample Image">
 
<p><a href="https://sourcecodester.com">SourceCodester</a></p>
 
<p><span style="font-family: arial, helvetica, sans-serif; color: rgb(0, 0, 0); font-size: 14px;">Duis tempus nisi at vehicula rutrum. Donec faucibus eros sed magna venenatis hendrerit. Duis nec arcu mollis, interdum ligula at, aliquet lectus. Proin fringilla, odio ac lacinia blandit, neque augue bibendum urna, <em>non mattis urna orci a mi</em>. Suspendisse vitae convallis quam. Integer at vestibulum erat, sit amet porta ante. Integer vel cursus ante. <span style="background-color: rgb(251, 238, 184);"><em>Integer eu massa sit amet lectus ullamcorper imperdiet</em></span>. Donec porttitor felis eu quam eleifend iaculis. In eget nulla orci. <strong>Cras fringilla</strong> dapibus justo, id mattis sapien tempus vitae. Cras congue ipsum eu consectetur tincidunt. Nam dictum rhoncus dui nec porta. </span></p>

about.html

    <img src="./images/img2.jpg" alt="">
    <p><span style="font-family: arial, helvetica, sans-serif; color: rgb(0, 0, 0); font-size: 14px;">Duis tempus nisi at vehicula rutrum. Donec faucibus eros sed magna venenatis hendrerit. Duis nec arcu mollis, interdum ligula at, aliquet lectus. Proin fringilla, odio ac lacinia blandit, neque augue bibendum urna, <em>non mattis urna orci a mi</em>. Suspendisse vitae convallis quam. Integer at vestibulum erat, sit amet porta ante. Integer vel cursus ante. <span style="background-color: rgb(251, 238, 184);"><em>Integer eu massa sit amet lectus ullamcorper imperdiet</em></span>. Donec porttitor felis eu quam eleifend iaculis. In eget nulla orci. <strong>Cras fringilla</strong> dapibus justo, id mattis sapien tempus vitae. Cras congue ipsum eu consectetur tincidunt. Nam dictum rhoncus dui nec porta. </span></p>
    
    <p><span style="color: rgb(0, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 12px;">Sed eu venenatis felis. Morbi elementum ornare magna ut venenatis. Nunc eget congue sem. Fusce porttitor, lacus sed ultrices laoreet, erat leo bibendum est, id iaculis erat est vel ante. Curabitur congue nulla eget nulla accumsan rhoncus. Sed a tellus libero. Nam varius id nisl tempus finibus. Nullam metus purus, pellentesque a venenatis eu, faucibus at eros. Donec eleifend neque bibendum, pulvinar sapien sit amet, maximus ligula. Etiam aliquet ante enim, molestie condimentum velit gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></p>
    
    <img src="./images/img3.jpg" alt="">

The given HTML scripts are the sample HTML script that contains the different contents to filter. Don't forget to change the sample image source on each HTML file that is available on your end.

Next, in your source code root folder, create a new PHP file named index.php and paste the following script. The code below is a combined PHP and HTML script that lists the page contents.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP - HTML Content Filtering</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./jquer-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">PHP - HTML Content Filtering</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-8 col-md-10 col-sm-12 mx-auto py-5">
            <h2 class="text-center"><b>HTML Content Filtering Befor Displaying using PHP</b></h2>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 mx-auto">
                <hr class="bg-primary border-primary opacity-100" style="border-top-width: 4px;">
            </div>
        </div>
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <div class="card rounded-0">
                <div class="card-header">
                    <div class="card-title text-muted"><b>List of Sample HTML Content</b></div>
                </div>
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div class="list-group rounded-0">
                            <div class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justifuc-content-between align-items-center">
                                    <div class="col-auto flex-shrink-1 flex-grow-1">
                                        <b>About Us Page Content</b>
                                    </div>
                                    <div class="col-auto flex-shrink-1">
                                        <a href="view.php?page=about" class="text-muted text-docoration-none"><i class="fa fa-eye"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justifuc-content-between align-items-center">
                                    <div class="col-auto flex-shrink-1 flex-grow-1">
                                        <b>Welcome Page Content</b>
                                    </div>
                                    <div class="col-auto flex-shrink-1">
                                        <a href="view.php?page=welcome" class="text-muted text-docoration-none"><i class="fa fa-eye"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Next, let's create the sample filtering function for this application. The script below is named filtering.php. It contains the function that is being called when filtering the original content and returns the altered content.

<?php
 
function filter_content_before($content=""){
    // If HTML content is not empty, filter content
    if(!empty($content)){
 
        /**
            * Forcing Links to view in new window
            */
        $links_match_count = preg_match_all('/\<a(.*?)\/a\>/', $content, $matches, PREG_OFFSET_CAPTURE);
        if($links_match_count > 0){
            // Loop matched links
                foreach($matches[0] as $link){
                // Check of links is already set to open into a new window or not
                $link_in_window_count = preg_match_all('/(:?target\s?=\s?["\']_blank["\'])/si', $link[0], $new_window_matches, PREG_OFFSET_CAPTURE);
                if($link_in_window_count <= 0){
                    $new_link = preg_replace('/(<a\b[^><]*)/i', '$1 target="_blank"', $link[0]);
                    $content = str_replace($link[0], $new_link, $content);
                }
 
            }
        }
        
        /**
            * Labeling Paragraphs
            */
        $paragraph_match_count = preg_match_all('/<p(.*?)>(.*?)<\/p>/si', $content, $paragraph_matches, PREG_OFFSET_CAPTURE);
 
        /**
            * Add label befor and after paragraphs
            */
        if($paragraph_match_count > 0){
            $pi = 1;
            foreach($paragraph_matches[0] as $paragraph){
                $new_paragraph = "<div class=\"text-muted text-center\"><em>{Start of Paragraph #{$pi}}</em></div>\n";
                $new_paragraph .= $paragraph[0]."\n";
                $new_paragraph .= "<div class=\"text-muted text-center\"><em>{End of Paragraph #{$pi}}</em></div>\n";
                // $new_paragraph .= "<div class=\"text-muted text-center\"><hr></div>\n";
                $content = str_replace($paragraph[0], $new_paragraph, $content);
                $pi++;
            }
        }
        // print_r($paragraph_match_count);exit;
 
        /**
            * Labeling Images
            */
        $img_match_count = preg_match_all('/<img(.*?)(\/?)>/si', $content, $img_matches, PREG_OFFSET_CAPTURE);
 
        /**
            * Add label befor and after Images
            */
        if($img_match_count > 0){
            $ii = 1;
            foreach($img_matches[0] as $img){
                $new_img = "<div class=\"text-muted text-center\"><em>{Start of Image #{$ii}}</em></div>\n";
                $new_img .= $img[0]."\n";
                $new_img .= "<div class=\"text-muted text-center\"><em>{End of Image #{$ii}}</em></div>\n";
                $content = str_replace($img[0], $new_img, $content);
                $ii++;
            }
        }
    }
    
    return $content;
}

Lastly, let's create the view page which displays the filtered content of the selected HTML scripts. The file below is named view.php. It contains a 2-panel window that represents the original output of the HTML content scripts and the altered one. On the left panel, it previews the original output of the content while the altered content preview is on the right panel.

<?php 
require_once('filtering.php');
$original_conent = "No Page Content Selected";
$filtered_conent = "No Page Content Selected";
$page = isset($_GET['page']) ? ucwords($_GET['page']).".html" : "";
if(!empty($page)){
    ob_start();
    include_once('./pages/'.$page);
    $original_conent = ob_get_clean();
    $filtered_conent = filter_content_before($original_conent);
    // echo "<pre>";
    // print_r($filtered_conent);
    // echo "</pre>";
    // exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> <?= isset($_GET['page']) ? ucwords($_GET['page'])." Page Content" : "No Page Content Selected" ?> | PHP - HTML Content Filtering</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./jquer-3.6.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
 
    <style>
        img{
            width: 100%;
            /* max-height:35vh; */
            object-fit:scale-down;
            object-position:center center;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">PHP - HTML Content Filtering</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-8 col-md-10 col-sm-12 mx-auto py-5">
            <h2 class="text-center"><b>HTML Content View Page</b></h2>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4 mx-auto">
                <hr class="bg-primary border-primary opacity-100" style="border-top-width: 4px;">
            </div>
            <h4 class="text-center"><b><?= isset($_GET['page']) ? ucwords($_GET['page'])." Page Content" : "No Page Content Selected" ?></b></h4>
        </div>
        <div class="row">
            <!-- Original Page Content Preview Container -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="card shadow-sm rounded-0">
                    <div class="card-header rounded-0">
                        <div class="card-title"><b>Original Page Content Preview</b></div>
                    </div>
                    <div class="card-body rounded-0">
                        <div class="container-fluid">
                            <?php echo $original_conent ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Original Page Content Preview Container -->
            <!-- Filtered Page Content Preview Container -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="card shadow-sm rounded-0">
                    <div class="card-header rounded-0">
                        <div class="card-title"><b>Filtered Page Content Preview</b></div>
                    </div>
                    <div class="card-body rounded-0">
                        <div class="container-fluid">
                            <?php echo $filtered_conent ?>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Filtered Page Content Preview Container -->
        </div>
    </div>
</body>
</html>

Output Snapshots

Here are the snapshots of the output of the script I have provided above.

"About Us" Page Content

"Welcome" Page Content

That's it! You can now test the sample web applications on your end. I have also provided the source code zip file that I created for this tutorial. You can download it by clicking the Download Button located below this article/content.

There you go! I hope this Filtering HTML Content Before Loading to Page using PHP Tutorial helps you with what you are looking for and that you'll find this useful for your current and future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

539 views