Regex Generator For Annish, Client Side

Language: Layout:

<html>

<head>
	<title>Regex Generator</title>
	<style type="text/css">
		* {
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			letter-spacing: 0.0640em;
		}
        
        body {
			margin: 10px 35px;
		}

button#generate {
			border: none;
			cursor: pointer;
			padding: 6px 8px;
			font-weight: bold;
			margin: auto;
			box-shadow: 0px 2px 0px 0px rgba(84, 82, 83, 0.59);
			background-image: -webkit-linear-gradient( 90deg, #3582bd 0%, #87b2db 100%);
			color: rgb(235, 240, 244);
			position: relative;
			font-size: 15px;
		}

button#generate:hover {
			background-image: -webkit-linear-gradient( 90deg, #2572ad 0%, #87b2db 100%);
		}
        
        input {
			padding: 3px 6px;
			margin-right: 8px;
			margin-left: 8px;
            font-size: 14px;
		}
        
        label[for="input"] {
            font-weight: bold;
        }

p{
			font-size: 14px;
		}

p#error{
			color: red;
		}
       
	</style>
</head>

<body>
	<div>
		<br>
		<label for="input">Enter desired configuraton:</label>
		<input type="text" id="input" onkeyup="event.keyCode === 13 && document.getElementById('generate').click()">
		<button id="generate" type="button" onclick="getRegex(document.getElementById('input').value)">Generate</button>
		<br>
		<label for="result">
			<h4>Result:</h4>
		</label>
		<p id="result">
			<br>
		</p>
		<p id="error"></p>
	</div>
	<div>
		<h4>Examples:</h4>
		amount&gt;1603
		<br> balance&lt;16
		<br>
		<br>
		<b>Available places:</b> amount, balance.
		<br>
		<br>
		<b>Available signs:</b> &gt;, &lt;.
		<br>
	</div>
	<script>
		"use strict";

const inputParser = new RegExp(`(${Object.keys(places).join("|")})([<>])(\\d+)`, "i");
			const parsed = input.replace(" ", "").match(inputParser);

if (parsed === null) {
				document.getElementById('error').innerHTML = error;
				return "";
			}

const [_, place, sign, number] = parsed;
			const l = number.length;
			const [ignoredDigit, makeRange, makeEnding] = (sign === "<") ?
				["0", (number, i) => `[0-${parseInt(number[i]) - 1}]`, (l) => (l > 1) ? `\\d{1,${l - 1}}` : ""] :
				["9", (number, i) => `[${parseInt(number[i]) + 1}-9]`, (l) => `\\d{${l + 1},}`];

let result = places[place];

for (let i = 0; i < l; i++) {
				let currentChar = number.charAt(i);
				if (currentChar === ignoredDigit)
					continue;
				result += `${number.substring(0, i)}${makeRange(number, i)}\\d{${l - i - 1}}|`;
			}
			result += makeEnding(l) + ")(?:[.,)]|$)";

result = result.replace("\\d{0}", "").replace(/\[([09])-\1\]/g, "$1").replace(/([:|])0[^|]+/g, "$1").replace(/(:)\||\|(\))/g, "$1$2");

testRegex(place, sign, number, result);

document.getElementById('result').innerHTML = result;
		}

function testRegex(place, sign, n, regex) {
			n = parseInt(n);
			regex = new RegExp(regex);
			const supportsNegative = ["balance"].includes(place);
			const gen = function* (s, e) {
				while (e-- > s)
					yield e;
			};

const [positiveData, negativeData] = (sign === "<") ?
				[gen(supportsNegative ? n - 10000 : 1, n), gen(n, n + 10000)] :
				[gen(n + 1, n + 10001), gen(n - 10000, n + 1)];

for (let i of positiveData) {
				if (!regex.test(i.toString())) {
					document.getElementById('error').innerHTML += `Automatic testing: generated regex didn't fire on ${i}!<br>`;
					break;
				}
			}

for (let i of negativeData) {
				if (regex.test(i.toString())) {
					document.getElementById('error').innerHTML += `Automatic testing: generated regex unexpectedly fired on ${i}!`;
					break;
				}
			}
		}
	</script>
</body>

</html>