/code/javascript/binasc.html

<!DOCTYPE html>
<!--
  JavaScript Binary to UTF-16 converter v2
  by "Pegasus Epsilon" <pegasus@pimpninjas.org>
  (C) 2019-2020 Distribute Unmodified
  https://pegasus.pimpninjas.org/license
  Notes:
  Conversion to binary outputs the minimum bit-width needed for a message.
  6 bits for numbers and punctuation
  7 bits for 7-bit clean ASCII
  8 bits for binary data (probably won't work right)
  11 bits for Russian
  16 bits for Japanese, Chinese, Korean...
  Feedback to address above.
-->
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<title>Binary/UTF-16 converter</title>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="\@pegasusepsilon" />
<meta name="twitter:creator" content="\@pegasusepsilon" />
<meta property="og:site_name" content="The Almighty Pegasus Epsilon" />
<meta property="og:title" content="UTF-16 Binary/ASCII converter" />
<meta property="og:type" content="text/html" />
<meta property="og:description" content="The best Binary/ASCII converter on the web" />
<meta property="og:image" content="/images/favicon.png" />
<meta property="og:url" content="https://pegasus.pimpninjas.org/" />
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
html, body { margin: 0; height: 100%; }
body { text-align: center; display: flex; flex-direction: column; }
body, textarea, button, select { background: #000; color: #fff; font-size: 1.5em; }
select { text-align: center; text-align-last: center }
.text { flex: 1; display: flex; }
textarea { font-family: monospace; position: relative; flex: 1; }
/*
html { padding: 0; border: 1px solid green; }
body { padding: 0; border: 1px solid blue; }
html, body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
*/
</style>
<script type="text/javascript">
var binText, ascText;
function toBinary () {
	var bin = [];
	var asc = ascText.value;
	var len = asc.length;
	if (!len) return binText.value = '';
	var i = len;
	while (i--) { bin.unshift(asc.charCodeAt(i)); }
	/*
	var bin = ascText.value.split('').map(function (c) {
		return c.charCodeAt();
	});
	*/
	var pad = Math.ceil(Math.log2(bin.reduce(function (a, b) {
		if (a > b) { return a }
		return b;
	})));
	/*
	var pad = bin.reduce(function (a, b) {
		if (a > b) { return a }
		return b;
	}) > 256 ? 16 : 8;
	*/
	i = len;
	while (i--) { bin[i] = bin[i].toString(2).padStart(pad, "0"); }
	binText.value = bin.join(" ");
	/*
	binText.value = bin.map(function (b) {
		return b.toString(2).padStart(pad, "0");
	}).join(" ");
	*/
}
function toAscii () {
	var asc = [];
	var bin = binText.value;
//	bin = bin.replace(/^[^01]+/, '');
//	bin = bin.replace(/[^01]+$/, '');
	bin = bin.split(/[^01]+/);
	var i = bin.length;
	while (i--) { asc.unshift(String.fromCharCode(parseInt(bin[i], 2))); }
	ascText.value = asc.join("");
	/*
	ascText.value = binText.value.split(" ").map(function (b) {
		return String.fromCharCode(parseInt(b, 2));
	}).join("");
	*/
}
function split (e) {
	var v = this[this.selectedIndex].value - 0;
	if (!v) {
		binText.value = binText.originalValue;
		return;
	}
	binText.value = binText.originalValue.replace(/[^01]+/g, '').split(RegExp("([01]{" + v + "})")).filter(x => x.length && x).join(" ");
}
onload = function () {
	binText = document.querySelector("#binary");
	ascText = document.querySelector("#ascii");
	binText.originalValue = binText.value;
	binText.onchange = function () { binText.originalValue = binText.value; }
	document.querySelector("#tobinary").onclick = toBinary;
	document.querySelector("#toascii").onclick = toAscii;
	document.querySelector("#split").onchange = split;
}
</script>
</head>
<body>
<div class="text" style="flex: 1">
<textarea id="ascii"></textarea>
</div>
<div id="buttons">
<button id="toascii">▲ To ASCII ▲</button>
<button id="tobinary">▼ To Binary ▼</button>
Force Split: <select id="split">
<option value="0" selected>No</option>
<option value="6">6-bits</option>
<option value="7">7-bits</option>
<option value="8">8-bits</option>
<option value="11">11-bits</option>
<option value="16">16-bits</option>
</select>
</div>
<div class="text" style="flex: 7">
<textarea id="binary"></textarea>
</div>
</body>
</html>
download