html pattern ajax,javascript - html input pattern with 2 patterns - Stack Overflow

I think the best approach is to use regex match, keypress event listener and replace. Please see below for suggested answer. In addition, I have put the code on https://jsfiddle.net/8p590mhq/ for test. Hope this helps.

HTML

JS

//ammend field function

let ammend_field = () => {

//get element by id

let ext = document.getElementById("extension");

//use regex match to replace ext.value input field

//original answer from:

//http://stackoverflow.com/questions/17260238/how-to-insert-space-every-4-characters-for-iban-registering

ext.value = ext.value.replace(/[^\d0-9]/g, '').replace(/(.{4})/g, '$1 / ').trim();

}

//add event listener to submit button

document.getElementById("extension").addEventListener("keypress", ammend_field);