Regex Password Strength

by Sam Fereday

HTML

<div id="pwds">
  <p>
    <strong>Password strengths (higher score is better):</strong>
  </p>
</div>

<input id="pwdInput" type="password" />
<span id="warning">
  <span id="fill"></span>
</span>

CSS

body {
  padding: 1em;
  font: 85%/1.4em arial;
}

p {
  padding: 0;
  margin: 0;
}

#pwdInput {
  float: left;
}

#warning {
  display: block;
  float: left;
  width: 8em;
  margin-left: 0.5em;
  border: 1px solid #333;
}

#fill {
  width: 0;
  display: block;
  height: 1.4em;
  background: #990000;
  transition: 0.2s all ease;
}

JavaScript

var pwds = document.getElementById("pwds");
var inp = document.getElementById("pwdInput");
var fill = document.getElementById("fill");
var passwords = ["", "apples", "oranges123", "sevensuns","Pramgas778*%$"];

function strComplexity(str)
{

  var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
  var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
  var enoughRegex = new RegExp("(?=.{6,}).*", "g");
	  
  if (strongRegex.test(str))
  	return 100;
  
  if (mediumRegex.test(str))
    return 66;
  
  if (enoughRegex.test(str))
    return 33;
    
  return 0;
     
}

passwords.forEach(v => {
		pwds.innerHTML += v.length > 0 ? "<br />" + strComplexity(v) + " - " + v : strComplexity(v) + " - Empty string";
});

inp.addEventListener("keypress", e => {
		var complexity = strComplexity(e.target.value);
    fill.style.width = complexity + "%";
    if(complexity > 33)
			fill.style.backgroundColor = complexity > 66 ? "#00ff00" : "#0000ff";
});

inp.addEventListener("blur", e => {
    var complexity = strComplexity(e.target.value);
    fill.style.width = complexity + "%";
		if(complexity > 33)
			fill.style.backgroundColor = complexity > 66 ? "#00ff00" : "#0000ff";
});