matey-jack · July 10, 2018 17:14
diff --git a/regex-test.html b/regex-test.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>This regex is so slow</title>
 </head>
 <body>

 <p>
    Be careful! Adding a space in the email address will freeze this page and the entire browser tab. 
    Spaces towards the beginning of the Field are ok, the middle is slow, and then towards the right runtime is several years!
 </p>

 <form>
    <label for="email">Example Email for our regex:</label><br/>
    <input id=email type="text" size="100" value="robert.jack.frederic.manfred.otto.hermann.egon.erwin.will@friday.de"/><br/>
    <button id="check">Check Regex!</button>
 </form>

 <p id="result">We'll tell you, how long it took!</p>

 <script type="application/javascript">
    const emailRegex = /^[A-Za-z0-9_%+-](\.?[A-Za-z0-9_%+-]+)+@[A-Za-z0-9-](\.?[A-Za-z0-9-]+)+\.[A-Za-z]{2,6}$/;

    document.getElementById("check").onclick = function (e) {
        e.preventDefault();
        const email = document.getElementById("email").value;
        const startTime = window.performance.now();
        const valid = emailRegex.test(email.trim()) ? "valid" : "invalid";
        const timeNeeded = window.performance.now() - startTime;
        document.getElementById("result").innerText = `This email is ${valid}. Checking it took ${timeNeeded} milliseconds.`;
    }
 </script>

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>This regex is so slow</title>
	</head>
	<body>

	<p>
	Be careful! Adding a space in the email address will freeze this page and the entire browser tab.
	Spaces towards the beginning of the Field are ok, the middle is slow, and then towards the right runtime is several years!
	</p>

	<form>
	<label for="email">Example Email for our regex:</label><br/>
	<input id=email type="text" size="100" value="robert.jack.frederic.manfred.otto.hermann.egon.erwin.will@friday.de"/><br/>
	<button id="check">Check Regex!</button>
	</form>

	<p id="result">We'll tell you, how long it took!</p>

	<script type="application/javascript">
	const emailRegex = /^[A-Za-z0-9_%+-](\.?[A-Za-z0-9_%+-]+)+@[A-Za-z0-9-](\.?[A-Za-z0-9-]+)+\.[A-Za-z]{2,6}$/;

	document.getElementById("check").onclick = function (e) {
	e.preventDefault();
	const email = document.getElementById("email").value;
	const startTime = window.performance.now();
	const valid = emailRegex.test(email.trim()) ? "valid" : "invalid";
	const timeNeeded = window.performance.now() - startTime;
	document.getElementById("result").innerText = `This email is ${valid}. Checking it took ${timeNeeded} milliseconds.`;
	}
	</script>

	</body>
	</html>