jsoncrush
Version:
Compress JSON in URL friendly strings
100 lines (86 loc) • 6.98 kB
HTML
<!doctype html>
<!--
JSONCrush by Frank Force [MIT] https://github.com/KilledByAPixel/JSONCrush
- Based on JavaScript Crusher by [MIT] http://www.iteral.com/jscrush
-->
<html><head><title>JSONCrush Demo</title></head><body></body>
<h1>JSONCrush Demo - Compress JSON into URL friendly strings</h1>
This simple system allows for excellent compression of URI encoded JSON strings using JSCrush.
<br>No additional libraries are used and minified code is less than 2k!
<br><a href=https://github.com/KilledByAPixel/JSONCrush>See GitHub for more info.</a>
<br>
<br>Type JSON here: (or any string really)
<br><textarea id=textarea_JSON cols=80 rows=8 placeholder="Enter JSON here."></textarea>
<br>
<br>Crushed: (your string crushed with JSONCrush)
<br><textarea disabled id=textarea_crushed_uri cols=80 rows=8></textarea>
<br>
<br>Uncrushed: (after being crushed and uncrushed, should match your orginal string)
<br><textarea disabled id=textarea_uncrushed cols=80 rows=8></textarea>
<br>
<div id=div_crush_result></div>
<br><button id=button_unitTests>Preform Unit Tests</button>
<br><br><div id=div_unit_test_results></div>
<script type=module>
'use strict';
// Here is an example of how to use JSON crush...
// First import JSONCrush as a module.
import JSONCrush from './JSONCrush.js';
textarea_JSON.oninput =()=>
{
// Get your string to crush.
const stringToCrush = textarea_JSON.value;
// Just call JSON crush to crush your string!
const crushed = JSONCrush.crush(stringToCrush);
// To uncrush call JSONUncrush on the crushed string.
const uncrushed = JSONCrush.uncrush(crushed);
// We can verify that the uncrushed string matches the orginal string
div_crush_result.innerHTML = stringToCrush == uncrushed? "SUCCESS: Strings match!" : "ERROR: Strings don't match!";
textarea_crushed_uri.value = crushed;
textarea_uncrushed.value = uncrushed;
}
button_unitTests.onclick =()=>
{
// Some tests that can be run to ensure that JSONCrush is working correctly...
let output = 'Unit Test Results...';
for(const testString of unitTests)
{
let crushed = '', uncrushed = '', error = '';
try
{
crushed = JSONCrush.crush(testString);
uncrushed = JSONCrush.uncrush(crushed);
}
catch (e) { error = e.message; }
const length1 = encodeURIComponent(testString).length;
const length2 = encodeURIComponent(crushed).length;
const percent = 100 * length2 / length1;
output += '<pre>' + testString + '</pre>';
if (testString != uncrushed)
{
output += 'FAIL! '
if (error)
output += 'Error: ' + error;
else
output += "Crushed string doesn't match: '" + uncrushed + "'";
}
else
output += 'PASS! Size Difference: ' + percent.toFixed(2) + '%';
if (length2 > length1)
output += ' Compressed is larger!';
output += '<br><br>';
}
div_unit_test_results.innerHTML = output;
}
const unitTests =
[
'This is the first unit test, feel free to add more.',
'{"students":[{"name":"Jack","age":17},{"name":"Jill","age":16},{"name":"Sue","age":16}],"class":"math"}',
'{"shaderStatements":[{"output":"b","outputSwizzle":"zxyw","assignmentOperator":"-=","functionName":"","parameter":"a","valueX":6.62,"valueY":6.165,"valueZ":-0.974,"valueW":-4.233,"parameterSwizzle":"xzyy"},{"output":"b","outputSwizzle":"ywxz","assignmentOperator":"-=","functionName":"","parameter":"a","valueX":-4.88,"valueY":0.649,"valueZ":0.171,"valueW":-0.084,"parameterSwizzle":"yzwx"},{"output":"a","outputSwizzle":"xzwy","assignmentOperator":"*=","functionName":"logA","parameter":"b","valueX":-2.368,"valueY":-7.284,"valueZ":-5.01,"valueW":-0.005,"parameterSwizzle":"zzwz"},{"output":"b","outputSwizzle":"xwzy","assignmentOperator":"-=","functionName":"sin","parameter":"b","valueX":-3.686,"valueY":-3.258,"valueZ":-4.059,"valueW":-8.506,"parameterSwizzle":"wwzz"},{"output":"b","outputSwizzle":"zxyw","assignmentOperator":"=","functionName":"ceil","parameter":"b","valueX":5.36,"valueY":-8.274,"valueZ":0.002,"valueW":5.429,"parameterSwizzle":"xxwy"},{"output":"a","outputSwizzle":"xzwy","assignmentOperator":"=","functionName":"","parameter":"b","valueX":-3.353,"valueY":-5.681,"valueZ":-7.792,"valueW":1.254,"parameterSwizzle":"zyxw"},{"output":"b","outputSwizzle":"ywxz","assignmentOperator":"+=","functionName":"floor","parameter":"a","valueX":6.669,"valueY":-0.05,"valueZ":-8.629,"valueW":-2.802,"parameterSwizzle":"xyyw"},{"output":"b","outputSwizzle":"xywz","assignmentOperator":"+=","functionName":"fract","parameter":"a","valueX":0.103,"valueY":-3.118,"valueZ":0.255,"valueW":6.287,"parameterSwizzle":"xyyw"},{"output":"a","outputSwizzle":"zxyw","assignmentOperator":"/=","functionName":"ceil","parameter":"","valueX":5.484,"valueY":-1.26,"valueZ":8.705,"valueW":-1.59,"parameterSwizzle":"zyyw"},{"output":"a","outputSwizzle":"wyzx","assignmentOperator":"=","functionName":"sqrtA","parameter":"b","valueX":-0.366,"valueY":-0.117,"valueZ":0.162,"valueW":1.761,"parameterSwizzle":"yywy"},{"output":"a","outputSwizzle":"yxzw","assignmentOperator":"*=","functionName":"atan","parameter":"b","valueX":3.743,"valueY":-0.003,"valueZ":4.636,"valueW":0.056,"parameterSwizzle":"wxxw"},{"output":"b","outputSwizzle":"zwxy","assignmentOperator":"=","functionName":"","parameter":"","valueX":6.083,"valueY":-6.322,"valueZ":0.032,"valueW":0.428,"parameterSwizzle":"yzyy"},{"output":"a","outputSwizzle":"zxyw","assignmentOperator":"/=","functionName":"","parameter":"a","valueX":0.151,"valueY":1.024,"valueZ":-2.862,"valueW":3.193,"parameterSwizzle":"xzyx"},{"output":"a","outputSwizzle":"zwxy","assignmentOperator":"*=","functionName":"","parameter":"a","valueX":-1.637,"valueY":1.828,"valueZ":1.924,"valueW":-0.006,"parameterSwizzle":"yxyy"}],"randSeed":-1810015485,"randSeedString":"1574121532870","iterationCount":1,"gridPosX":4,"gridPosY":0,"generation":17,"subGeneration":1,"hueOffset":0.218,"hueScale":-0.789,"saturationScale":0.493,"uvOffsetX":-0.36,"uvOffsetY":0.559,"uvScaleX":1.02,"uvScaleY":-1.143,"rotate":0,"usePalette":0,"paletteColors":[{"x":0.041,"y":0.01,"z":0.584},{"x":0.131,"y":0.102,"z":0.658},{"x":0.9,"y":0.855,"z":0.917},{"x":0.797,"y":0.882,"z":0.478}],"saveListIndex":-1,"uniqueID":361315861}',
`unescaped characters: _-.:!~*'{}":,"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`,
'emojis: 😄🐰🐢 ☂👍☕ ©¥ñ ✌♥☻␌',
'compressed emojis: aa😄aa😄aa😄aa😄aa🐰🐢🐰🐢🐰🐢🐰🐢🐰🐰🐢🐰🐢🐰🐢🐰🐢🐰🐰🐢🐰🐢🐰🐢🐰🐢🐰',
'aaaaaaaa',
'This test should fail because delimiters \u0001\u0001\u0001\u0001 (\\u0001) will be removed.',
];
</script></body></html>