JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"  id="plates" pattern="^[A-Z]{2} ?- ?\d{3} ?- ?[A-Z]{2}$"/>

CSS

input{border:1px solid #D0D0D0;height:50px;}

JavaScript

function check(s) {
    var toks = s.split('-');
    //console.log(toks);
    switch(toks.length){
        case 3:
        if (!/^[A-Za-z]{0,2}$/.test(toks[2].trim())) return false;
        case 2:
        if (!/^\d{0,3}$/.test(toks[1].trim())) return false;
        case 1:
        return /^[A-Za-z]{0,2}$/.test(toks[0].trim());
        default:
        return false;
    }
}
var oldvalue = '';
$('#plates').keyup(function(e){
    if (!check(this.value)) {
        this.value = oldvalue;
    } else {
        oldvalue = this.value = this.value.toUpperCase();
    }
    if((this.value.length==2 || this.value.length==6) && (e.keyCode!=8)){
            this.value=this.value+"-";
    }
});