Web hex dumper, with colors
| <?php | |
| header('Content-Type: text/html; charset=utf-8'); | |
| define('POST_MAX_LENGTH', 4096); | |
| if (!isset($_POST['txt'])) { | |
| $txt = "<?php\necho 'Hello World!';\n?>"; | |
| } elseif(strlen($_POST['txt']) > POST_MAX_LENGTH) { | |
| $txt = substr($_POST['txt'], 0, POST_MAX_LENGTH); | |
| } else { | |
| $txt = $_POST['txt']; | |
| } | |
| $hex = array_map('strtoupper', array_map('dechex', range(0,15))); | |
| ?><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hex it!</title> | |
| <style> | |
| body,html {margin:0;padding:0;background:#333;} | |
| body,table {font-family:"Consolas","Monaco","Courier New","Courier",monospace;font-size:14px;line-height:18px;width:100%} | |
| body {padding:50px 70px;width:570px} | |
| tbody th {padding-right:6px;} | |
| thead th {padding-bottom:1px;} | |
| td {padding:3px;color:#0c0;cursor:pointer;} | |
| tr:hover td,tr:hover th {background:#2A2A2A;} | |
| th,.hex {text-align:right;color:#990;padding:3px;} | |
| textarea,input {border:1px solid #000;background:#222;color:#eaeaea;padding:6px;margin-bottom:8px;float:right;} | |
| textarea {display:block;width:100%;height:200px;padding:2px;} | |
| a {text-decoration:none;color:#990;} | |
| .highlight {background-color:#000 !important;} | |
| .plain {padding-left:20px;text-align:left;white-space:pre;color:#0cc;} | |
| .plain b {font-weight:normal;} | |
| th.plain {color:#990;} | |
| a.empty {color:#c30;} | |
| .nonprintable {color:#f3f;} | |
| .normal {color:#0c0;} | |
| .whitespace {color:#ccc;} | |
| .danger {color:#c30;} | |
| </style> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $('#hex').on('click', 'b', function() { | |
| $('.highlight').removeClass('highlight'); | |
| $(this).addClass('highlight').parent().parent().find('td').eq($(this).prevAll('b').length).addClass('highlight'); | |
| }); | |
| $('#hex').on('click', 'td:not(.plain)', function() { | |
| $('.highlight').removeClass('highlight'); | |
| $(this).addClass('highlight').parent().find('td.plain b').eq($(this).prevAll('td').length).addClass('highlight'); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <form method="post" action=""> | |
| <textarea maxlength="<?=POST_MAX_LENGTH?>" name="txt"><?="\n".htmlspecialchars($txt)?></textarea> | |
| <span class="hex">Legend: </span> | |
| <span class="normal"> normal </span> | |
| <span class="whitespace"> whitespace </span> | |
| <span class="danger"> high/low ascii </span> | |
| <input type="submit" value="Hex it!"> | |
| </form> | |
| <table cellpadding="0" cellspacing="0" border="0" id="hex"> | |
| <thead> | |
| <tr> | |
| <th> </th> | |
| <?php foreach($hex as $i){ echo "\t\t\t<th>+{$i}</th>\n"; } ?> | |
| <th class="plain"><?=implode('',$hex)?></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <?php | |
| $offset = 0; | |
| $strlen = strlen($txt); | |
| while ($offset < $strlen && $line = substr($txt, $offset, 0x10)) { | |
| echo "\t\t<tr>\n\t\t\t<th>0x" . sprintf('%04X', $offset) . "</th>\n\t\t\t"; | |
| $linelen = strlen($line); | |
| $offset += $linelen; | |
| $hexpart = ''; | |
| $plainpart = ''; | |
| for ($i = 0; $i < $linelen; $i++) { | |
| $class = ''; | |
| $ascii = ord($line[$i]); | |
| if ($ascii < 0x20 || $ascii > 0x7F) { | |
| $char = '<b class="nonprintable">.</b>'; | |
| if (!in_array($ascii, array(0x09, 0x0A, 0x0D))) { | |
| $class = ' class="danger"'; | |
| } else { | |
| $class = ' class="whitespace"'; | |
| } | |
| } else { | |
| if ($ascii == 0x20) { | |
| $class = ' class="whitespace"'; | |
| } | |
| $char = '<b>'.htmlspecialchars($line[$i]).'</b>'; | |
| } | |
| $hexpart .= "<td{$class}".($i==$linelen-1?((0x10-$linelen)?(' colspan="'.(0x11-$linelen).'"'):''):'').">".sprintf('%02X', $ascii)."</td>\n\t\t\t"; | |
| $plainpart .= $char; | |
| } | |
| echo $hexpart . "<td class=\"plain\">" . $plainpart . "</td>\n\t\t</tr>\n"; | |
| } | |
| ?> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment