There are many ways to optimize a HTML page, and one of these way is to remove white space. Whitespace between tags in HTML pages is just for readability, so if you have a site that has a lot of visits, it’s a good idea to consider strip away things such as extra whitespace in HTML. For a small to medium size webite, you can easily save 500 megabytes (MB) to a few gigabytes (GB) transfers a month just by cleaning whitespace and newline characters out of their HTML.
<html>
<head><title>Removing whitespace from HTML</title></head>
<body>
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="post">
<input type="text" name="html"
value="<?php print $_POST['html'];?>" /><br />
<input type="submit" value="Remove whitespace" /><br /><br />
<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" )
{
$html = $_POST['html'];
$newhtml = preg_replace( "/(?:(?<=\>)|(?<=\/\))(\s+)(?=\<\/?)/","", $html );
print "<b>Original text was: &nbsp;'". htmlspecialchars($html) .
"'</b><br/>";
print "<b>New text is: &nbsp;'". htmlspecialchars($newhtml) . "'</b><br />";
}
?>
</form>
</body>
</html>
Regular Expression Explanation:
The look-behind group (?:(?<=\>)|(?<=\/\>)) matches the end of an HTML tag. The reason (?<=\>|\/\>) doesn’t work in the expression is because neither Perl nor PHP permits variable-length look-behinds. Each look-behind needs to be broken up by itself and put inside a group, such as (?:(?<=\>)|(?<\/\>)).
|
(?: |
a noncapturing group that contains … |
|
(?<= |
a positive look-behind with … |
|
\> |
a > … |
|
) |
the end of the positive look-behind … |
|
| |
or … |
|
(?<= |
a positive look-behind with … |
|
\/ |
a slash, followed by … |
|
\> |
a > … |
|
) |
the end of the positive look-behind … |
|
) |
the end of the noncapturing group … |
|
( |
|
|
\s |
whitespace … |
|
+ |
one time or more … |
|
) |
the end of the capturing group … |
|
(?= |
a positive look-ahead … |
|
\< |
a <, followed by … |
|
\/ |
a slash … |
|
? |
that can occur at most once … |
|
) |
the end of the positive look-ahead. |
Very useful but noticed a type in the rendering of the code perhaps because of the wrap around:
/(?:(?)|(?<=\/
\))(\s+)(?=\<\/?)/
Based on your breakdown of the regex I think it should be:
/(?:(?)|(?))(\s+)(?=\ is missing from the colour render.
Thanks again.
Hi, Toby
thanks for your comment, yea, i guess my wrapper has that problem, i will change to a better one once i find one. :)
Hi, i like to steal code very often, but I have Problems now to understand where and how to add the correction of Toby.
I also get an Error with the Regex used in your Demo:
Warning: preg_replace() [function.preg-replace]: Compilation failed: missing ) at offset 34 in /home/chris/html/xeloop/root/TEST/form.php on line 12
Is it possible to add the full working regex again?
Thanks for your work.
hi
fde3eu999ecc591t
good luck
Hi, pls post the full regex again
Thanks
Full pattern:
$pattern = ‘/(?:(?)|(?))(\s+)(?=\<\/?)/’;
Whoops. That stripped a lot of text. Try this instead (**note that the comment form would not let me post a bunch of needed characters):
1. Click the link: http://tinyurl.com/cm2zcq
2. Check out the pattern in the google search bar
-Ryan
I couldn’t get this regex to work for me (even from the tinyurl link Ryan provided. I did however find another alternative on an asp site.
regex pattern: “\s+<”
replace with: “<”
This did the trick for me, so I’d thought I’d share here too.
In case posting this does not work, there should be a less than sign after the plus sign and a less than sign in the replace with.
the posted regex in the article left me with nothing…
Thanks for the article, and thank you Ryan.
I can confirm the regular expression Ryan posted works well in removing whitespace from HTML. Very useful correction from the regular expression in the article, as that one removes everything.
Pingback: Scott Bush » Examples of design as a fail-safe measure
Thank you for this nice and beneficial article even the regex didn’t work but “Ryan” saved the situation and you regex worked fine .. thank you guys.
Pingback: A Popurls Clone with PHP, jQuery, Awesomeness | profeshunl newbie
Pingback: Examples of design as a fail-safe measure | Scott Bush
<?php
function html_compact($content){
return trim(
preg_replace("/\s+</", "\s+/”, “>”,
preg_replace(“|(>(\s+)
vale la pena leggere. L’ho trovato molto istruttivo, come ho fatto ricerche molto ultimamente sulle questioni pratiche, come si parla di …