Masking the Credit Card Numbers using Vanilla JS

Suppose we have a textbox and we have to mask (with asterisk (*) character) a portion of the string (which is a credit card number) when user enter the values one after the other.
That means , if the user enters XXXX XXXX XXXX XXXX , the output will be XXXX XX** **** XXXX where X represents any valid number.
The below program will help to do so

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('txtCCN').addEventListener('keyup', function() {
    var value = this.value;
    this.value = value.substring(0, 7) + value.substring(7, 15).replace(/\d/g, '*') 
                + value.substring(15);}, false);});

------------  HTML--------------
<input type="text" id="txtCCN" required maxlength="19" />