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