charCodes from string

Show charcodes of a string. Also show codepoints for multibyte strings.

by Laurens Maneschijn

HTML

<textarea id="query">
	123 abc XYZ 𝔽𝕠𝕣𝕞𝕒𝕥𝕥𝕚𝕟𝕘
</textarea>

<div style="float: right;">
	examples:<br>
	<code></code><br>
	<code>	123 abc XYZ</code><br>
	<code>˙ʇɔnpoɹd ɹo ʇuǝʌǝ sıɥʇ ǝsɹopuǝ ʎʃıʇɹɐǝɥ I</code><br>
	<code>𝓢𝓱𝓸𝓾𝓵𝓭 𝔽𝕠𝕣𝕞𝕒𝕥𝕥𝕚𝕟𝕘 𝘐𝘯 𝓣𝓲𝓽𝓵𝓮𝓼 𝕭𝖊 🅿🅴🆁🅼🅸🆃🆃🅴🅳?</code><a target="_blank" href="https://meta.stackoverflow.com/questions/342024">SO</a><br>
	<code style="max-width: 100px; overflow: hidden;">TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ</code><a target="_blank" href="https://stackoverflow.com/a/1732454/1158769">SO tony the pony</a><br>
<!-- 
	<br>
	(also see console logs)<br>
	<br>
	TODO: smarter utf8/unicode/multibyte parsing
-->
</div>

<div id="result"></div>
<div id="result2"></div>

CSS

* {
	box-sizing: border-box;
}

textarea {
	width: 100%;
	height: 100px;
}

code {
	display: inline-block;
	white-space: pre;
	margin: 1px;
	padding: 1px;
	background: #8881;
	border: 1px dotted #888;
	border-radius: 4px;
	cursor: pointer;
	min-width: 1em;
	min-height: 1em;
}

table {
	border-collapse: collapse;
}
table td, 
table th {
	border: 1px solid #888;
}
table tbody tr:hover {
	outline: 1px solid #00f;
}
table tbody tr:hover td, 
table tbody tr:hover th {
	background: #0082;
}
th {
	font-weight: normal;
	font-size: small;
}
#result, #result2 {
	float: left;
	margin: 5px;
}

JavaScript

function getCharCodes(str) {
	str = '' + str;
	var arr = [];
	for (var i=0 ; i<str.length ; i++) {
		arr.push({
			'str[i]'      : str[i],
			charAt        : str.charAt(i),
			charCodeAt    : str.charCodeAt(i),
			charCodeAtHex : '0x' + str.charCodeAt(i).toString(16),
//			codePointAt   : str.codePointAt(i),
//			codePointAtHex: '0x' + str.codePointAt(i).toString(16),
		});
	}
	console.table(arr);
//	console.log(arr);
	return arr;
}

function getCodePoints(str) {
	str = '' + str;
	var arr = [];
	// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt
	for (let codePoint of str) {
		var subCodePoints = [];
		var subCodePointsHex = [];
		var i = 0;
		while(codePoint.codePointAt(i)) {
			subCodePoints.push(codePoint.codePointAt(i));
			subCodePointsHex.push('0x' + codePoint.codePointAt(i).toString(16));
			i++;
		}
		arr.push({
			codePoint: codePoint,
			subCodePoints: subCodePoints.join(', '),
			subCodePointsHex: subCodePointsHex.join(', '),
		});
	}
	console.table(arr);
	return arr;
}


var timeout_update;
function update() {
	clearTimeout(timeout_update);
	timeout_update = setTimeout(update2, 200);
}

var lastvalue = null;
function update2() {
	var value = getInput().value;
	if (lastvalue === value) {
		return;
	}
	draw_result(getCharCodes(value), document.querySelector('#result'));
	draw_result(getCodePoints(value), document.querySelector('#result2'));
}

function _el(tag, options) {
	var el = document.createElement(tag);
	options = options || {};
	if (options.properties) {
		for (var p in options.properties) {
			el[p] = options.properties[p];
		}
	}
	if (options.attributes) {
		for (var p in options.attributes) {
			el.setAttribute(p, options.attributes[p]);
		}
	}
	if (options.style) {
		for (var p in options.style) {
			el.style[p] = options.style[p];
		}
	}
	if (options.text) {
		el.innerText = options.text;
	}
	if (options.html) {
		el.innerHtml = options.html;
	}
	if (options.appendTo &&...