Hashing
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="http://hashids.org/public/js/lib/hashids.min.js"></script>
<label>Input
<input type="text" id="input" />
</label>
<label>Salt
<input type="text" id="salt" />
</label>
<label>Alphabet
<input type="text" value="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890" id="alphabet" />
</label>
<label>Length
<input type="text" value="1024" id="length" />
</label>
<label>Output
<textarea type="textarea" id="output"></textarea>
</label>
<label>Decode
<textarea type="textarea" id="Decode"></textarea>
</label>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
body {
padding: 20px;
}
input,
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
#out span {
background: lightblue;
}
JavaScript
$('input').on('input', function(event) {
var input = $('#input').val();
var salt = $('#salt').val();
var alphabet = $('#alphabet').val();
var length = $('#length').val();
var output = $('#output');
var hashids = new Hashids(salt, length, alphabet);
var inputHex = input.hexEncode();
//console.log(inputHex);
var encoded = hashids.encodeHex(inputHex);
//console.log(encoded);
output.val(encoded);
//var decoded = hashids.decodeHex(encoded);
//console.log(decoded);
//var outputHex = decoded.hexDecode();
//console.log(outputHex);
/*
hash = hash.match(/.{1,8}/g);
for ( var i=0; i< hash.length; i+=2 ){
hash[i] = '<span>' + hash[i] + '</span>';
}
$("#out").html(hash.join(''));
*/
});
String.prototype.hexEncode = function() {
var i, hex;
var result = "";
for (i = 0; i < this.length; i++) {
hex = this.charCodeAt(i).toString(16);
result += ("000" + hex).slice(-4);
}
return result;
}
String.prototype.hexDecode = function() {
var j;
var hexes = this.match(/.{1,4}/g) || [];
var result = "";
for (j = 0; j < hexes.length; j++) {
result += String.fromCharCode(parseInt(hexes[j], 16));
}
return result;
}