print unicode range of html chars

by Laurens Maneschijn

HTML

<form>
Print all unicode characters from x to y:<br>
<input id="min" type="number" step="1" min="0" value="10400">
<input id="max" type="number" step="1" min="0" value="10800">
<input type="submit">
</form>

<hr>
Braille: <r>10240-10495</r>
Arrows: <r>8592-8703</r>, <r>10136-10239</r>, <r>10496-10619</r>, <r>11008-11263</r>
Borders and lines: <r>9472-9580</r>
Checks, crosses, stars: <r>10003-10062</r>
(12000 and up mostly seems chinese and arabic etc.)
<hr>

<div id="target"></div>

<table>
<thead>
<tr>
<th>n</th>
<th>*</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

CSS

span {
	font-size: 30px;
}

table {
	border-collapse: collapsed;
}
table tr td {
	padding: 2px;
	border: 1px solid #888;
}

r,
#target span {
	display: inline-block;
	margin: 1px;
	padding: 1px;
	border: 1px solid #888;
}

r {
	cursor: pointer;
}

JavaScript

//	for(var i=10520; i<= 10540; i++) {
//		$(document.body).append('<span title="&amp;#'+i+';">&#'+i+';</span>');
//	}

function go(min, max) {
	// make sure we never print more than 1000 chars or so, as it will take a long time to build DOM for that:
	var d_max = 2000;
	min = min || 1;
	max = max || min + d_max;
	$('#target').empty();
	$('tbody').empty();
	if (max < min) {
		return;
	}
	if (max > min + d_max) {
		max = min + d_max;
	}
	for (var i = min ; i <= max; i++) {
		$('#target').append('<span title="&amp;#'+i+';">&#'+i+';</span>');
//		$('tbody').append('<tr><td>'+i+'</td><td><span title="&amp;#'+i+';">&#'+i+';</span></td></tr>');
	}
}
// go(10400, 10800);

$(document.body).on('submit', function(e){
	e.preventDefault();
	var min = parseInt($('#min').val(), 10);
	var max = parseInt($('#max').val(), 10);
	go(min, max);
});

$(document.body).on('click', 'r', function(e){
	e.preventDefault();
	var r = $(this).text().trim().replace(/\s+/g,'').split('-');
	var min=parseInt(r[0], 10), max=parseInt(r[1], 10);
	$('#min').val(min);
	$('#max').val(max);
	go(min, max);
});