Everyone who ever worked on a high-profile web site with web standards know there\u2019s inevitable moment when the site has to go to its\u2019 new owners. More than often we fall in love with the site\u2019s tight structure and semantic markup. My heart breaks at that right moment when I have to insert a third-party advertisement script, which I know in advance is a tag soup. But can we do something about it? <\/p>\n
With regular expressions<\/a> and a bit of PHP we can clean HTML junk in the third-party scripts and turn it into nice, tidy markup. I assume that you have at least adequate knowledge of PHP.<\/p>\n Let\u2019s see the typical piece of HTML we often get from an ad supplier:<\/p>\n The above is most likely to be inserted somewhere under vertical navigation or within the rest ugly advertisement kids. The I suppose if you\u2019re working on some content-driven, large-scale, high-profile web site, you output everything from a buffer, but that\u2019s a discussion for some other occasion. It is the best to use output buffering<\/a> to clean bad markup before it\u2019s sent to the browser.<\/p>\n First, let\u2019s make a new structure. To make the HTML semantically correct we should place the above sample links into an unordered list. The final markup should look like the following:<\/p>\n The CSS should be append to your main CSS file or better yet (and if the ad supplier permits this kind of modification of the ads), you or your team designer should style ad links according to the site\u2019s main look and feel. It\u2019s still very rarely the case, but lately it\u2019s getting better, especially with the clients who begin to understand that what attracts visitors is the web site\u2019s content.<\/p>\n If you start replacing without the major plan, you\u2019ll probably end up spending too much of your valuable hours, which could have been spent on cross-browser debugging or accessibility improvements, to name a few.<\/p>\n In PHP, strings are replaced with two very powerful functions: the First thing\u2019s first – let\u2019s remove white space between HTML elements – it will save us a lot of trouble later:<\/p>\n The next step is also very simple – we\u2019ll remove everything within After we got rid of the improperly placed We simply pulled everything inside the … and there it is – a perfectly tight markup. Below is the complete code, which you can copy to a file with a Everyone who ever worked on a high-profile web site with web standards know there\u2019s inevitable moment when the site has to go to its\u2019 new owners. More than often we fall in love with the site\u2019s tight structure and semantic markup. My heart breaks at that right moment when I have to insert a third-party […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/107"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<style>\r\na { COLOR: RED; BACKGROUND: GREEN; }\r\na:hover { COLOR: YELLOW; BACKGROUND: ORANGE; }\r\n<\/style>\r\n<table border=0 width=100% background=#FFFFF>\r\n<tr>\r\n<td><a href=\"http:\/\/somesite.com\/\">ad link 1<\/a><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><a href=\"http:\/\/somesite.com\/\">ad link 2<\/a><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><a href=\"http:\/\/somesite.com\/\">ad link 3<\/a><\/td>\r\n<\/tr>\r\n<\/table><\/pre>\n<style><\/code> tags shouldn\u2019t be anywhere else than inside the <head><\/code> tags. I also personally don\u2019t like that table, so we\u2019ll attempt to transform it into a much more appropriate unordered list. But I suppose that\u2019s just my weird taste.<\/p>\nClean it While It\u2019s in the Buffer<\/h3>\n
Careful Planning is the Key<\/h3>\n
<div id=\"advertisementId\" class=\"ads\">\r\n<ul>\r\n<li><a href=\"http:\/\/somesite.com\/\">ad link 1<\/a><\/li>\r\n<li><a href=\"http:\/\/somesite.com\/\">ad link 2<\/a><\/li>\r\n<li><a href=\"http:\/\/somesite.com\/\">ad link 3<\/a><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\n
str_replace()<\/code><\/a> and the preg_replace()<\/code><\/a>. The former is useful for small chunks and it takes advantage over the later with its\u2019 speed. preg_replace()<\/code> deals well with regular expression patterns, but is also more intensive for the server processor – it\u2019s something you don\u2019t want to play with on the popular web site. However, if applied carefully, it shouldn\u2019t affect the performance.<\/p>\nStep By Step Replacement<\/h3>\n
$content = preg_replace('\/>(\s|\n|\r)*<si' , '><', $content);<\/pre>\n<style><\/code> and <\/style><\/code>, including those two.<\/p>\n$content = preg_replace('\/<style.*?style>\/si', '', $content);<\/pre>\n<style><\/code> element, we should remove <table><\/code> tags and place all those table rows into a division. At this point we can also define an id and a class attribute for that division and also add the unordered list for the list items.<\/p>\n$content = preg_replace('\/<table.*?>(.*)?<\\/table>\/si', '<div id=\"advertisementId\" class=\"ads\"><ul>$1<\/ul><\/div>', $content);<\/pre>\n<table><\/table><\/code> and pushed it into a <div id=\"advertisementId\" class=\"ads\"><ul><\/ul><\/div><\/code>. This is stil pretty untasty tag soup, but the only thing that\u2019s left to be made is transforming each table row into a list item…<\/p>\n$content = preg_replace('\/<tr><td>\/si', '<li>', $content);\r\n$content = preg_replace('\/<\\/td><\\/tr>\/si', '<\/li>', $content);<\/pre>\n.php<\/code> extension and try it at the safety of your home or office:<\/p>\n<?php\r\nfunction clean_HTML($content) {\r\n $content = preg_replace('\/>(\s|\n|\r)*<si' , '><', $content);\r\n $content = preg_replace('\/<style.*?style>\/si', '', $content);\r\n $content = preg_replace('\/<table.*?>(.*)?<\\/table>\/si', '<div id=\"advertisementId\" class=\"ads\"><ul>$1<\/ul><\/div>', $content);\r\n $content = preg_replace('\/<tr><td>\/si', '<li>', $content);\r\n $content = preg_replace('\/<\\/td><\\/tr>\/si', '<\/li>', $content);\r\n return $content;\r\n}\r\nob_start('clean_HTML'); \r\n?>\r\n\r\n<style>\r\na { COLOR: RED; BACKGROUND: GREEN; }\r\na:hover { COLOR: YELLOW; BACKGROUND: ORANGE; }\r\n<\/style>\r\n<table border=0 width=100% background=#FFFFF>\r\n<TR>\r\n<TD><a href=\"http:\/\/somesite.com\/\">ad link 1<\/a><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><a href=\"http:\/\/somesite.com\/\">ad link 2<\/a><\/td>\r\n<\/tr>\r\n<tr>\r\n<td><a href=\"http:\/\/somesite.com\/\">ad link 3<\/a><\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"