Jquery password strength checker code improvment

Question

I've done a part of this code to change the color of the progress bar regarding it's value. It goes from red to green regarding the password strength. I think there is a way better methods to have it done. However it works perfectly. Can someone check it to see if there is a cleaner way to acheive it please?

Here is the JavaScript code:

var pass = document.getElementById("password")
    pass.addEventListener('keyup', function() {
        checkPassword(pass.value)
    })
    function checkPassword(password) {
        var strengthBar = document.getElementById("strength")
        var strength = 0;
        if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
            strength += 1
        }
        if (password.match(/[~<>?]+/)) {
            strength += 1
        }
        if (password.match(/[!@£$%^&*()]+/)) {
            strength += 1
        }
        if (password.length > 5) {
            strength += 1
        }
        if (password.length > 8) {
            strength += 1
        }
        switch(strength) {
            case 0:
                strengthBar.value = 0
                $('#strength').removeClass('red')
                break
            case 1:
                strengthBar.value = 20
                $('#strength').addClass('red')
                $('#strength').removeClass("orange")
                break
            case 2:
                strengthBar.value = 40
                $('#strength').removeClass("red")
                $('#strength').addClass('orange')
                $('#strength').removeClass("yellow")
                break
            case 3:
                strengthBar.value = 60
                break
            case 4:
                strengthBar.value = 80
                $('#strength').removeClass("orange")
                $('#strength').addClass('yellow')
                $('#strength').removeClass("green")
                break
            case 5:
                strengthBar.value = 100
                $('#strength').removeClass("yellow")
                $('#strength').addClass('green')
                break
        }
    }

HTML code for testing purpose:

<h1>Progress</h1>
<label>Enter password</label>
<input style="width: 200px" type="text" autocomplete="none" id="password">
<progress id="strength" class="strength" value="0" max="100"> 32% </progress>

CSS that goes with:

progress.strength {
    -webkit-appearance: none;
    appearance: none;
}
progress.strength::-webkit-progress-value {
    background;
}
progress.red::-webkit-progress-value {
    background:red;
}
progress.orange::-webkit-progress-value {
    background:rgb(255, 153, 0);
}
progress.yellow::-webkit-progress-value {
    background:rgb(229, 255, 0);
}
progress.green::-webkit-progress-value {
    background:rgb(53, 252, 13);
}

Answer 1

Use an array of regular expressions to test against, and clean them up by using the case-insensitive flag and \d instead of [0-9]. From there, you can determine the total strenth by iterating over the array and testing each.

Instead of assigning the .value for each possibility, multiply the strength by 20. Eg 2 * 20 results in 40.

Use an array of classes corresponding to each strength value. Overwrite the prior classes completely in advance instead of trying to figure out the previous color.

const colors = ['', 'red', 'orange', 'orange', 'yellow', 'green'];
const patterns = [
     /[a-z\d][a-z\d]{2,}/i,
     /[~<>?]+/,
     /[!@£$%^&*()]+/,
     /.{6}/,
     /.{9}/,
];
const strength = patterns.reduce((count, pattern) => count + pattern.test(password), 0);
strengthBar.value = strength * 20;
$('#strength')
  .removeClass(colors.join(' '))
  .addClass(colors[strength]);