generate a series of characters

generate html entities from x ... y using &#NNN;

by Laurens Maneschijn

HTML

<div class="fixed">
	<form target="_blank">
	<button type="button" onclick="cls();">clear</button>
	<button type="button" onclick="run();">run()</button>
	<button type="button" onclick="next();">next()</button>
	<button type="button" onclick="run();next();">run() , next()</button>
	<br>
	<input type="number" id="n_min" value="1">
	<input type="number" id="n_max" value="10000">
	<input type="reset">
	</form>
</div>
Generate html entities from x ... y using <code>&amp;#NNN;</code> .

<br>
<details><summary>?</summary>
<pre>
Useful to e.g. test if some unicode characters actually show up in your browser.
What a character looks like or if it shows at all depends on OS, fonts, fontsizes, etc. etc.
Also "combined characters" can get messy.
This is just really dumb and quick putting them all behind eachother
with a mouseover tooltip with the number.
</pre>

For searching specific characters I recommend:<br>
<a target="_blank" href="https://www.amp-what.com/">amp-what.com</a>
</details>

<hr>

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

CSS

.fixed {
	 position: fixed;
	 top: 10px;
	 right: 10px;
	 background: #80808040;
	 padding: 2px;
}
.fixed > * {}

.fixed input[type="number"] {
	max-width: 70px;
}

details:not([open]) {
	display: inline-block;
}

#target {
	word-break: break-all;
}

JavaScript

let _target = document.querySelector('#target');
let _n_min = document.querySelector('#n_min');
let _n_max = document.querySelector('#n_max');
let i_min = 1;
let i_max = 10000;
document.querySelector('form').onsubmit = function(e){e.preventDefault();};
function cls() {
	_target.innerHTML = '';
}
function draw(nmin, nmax) {
	for (let i = nmin; i <= nmax; i++) {
		let el = document.createElement('span');
		el.innerHTML = '&#' + i + ';';
		el.title = i + ' &#' + i + ';';
		_target.appendChild(el);
	}
}
function run() {
	let i_min_new = parseInt(_n_min.value, 10);
	let i_max_new = parseInt(_n_max.value, 10);
	if (isNaN(i_min_new) || isNaN(i_max_new) || i_min_new > i_max_new) {
		return;
	}
	i_min = i_min_new;
	i_max = i_max_new;
	draw(i_min, i_max);
}
function next() {
	let i_min_old = i_min;
	let i_max_old = i_max;
	let d = i_max - i_min;
	i_min = i_max_old + 1;
	i_max = i_min + d;
	_n_min.value = i_min;
	_n_max.value = i_max;
}
function demo() {
	cls();
//	draw(1, 255);
//	draw(9000, 12000);
	draw(127744, 128844);
}
demo();