JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<h2>
Type or paste a text like: X_AB0, a_ddd
</h2>

ID-A: <input type="text" size="36" maxlength="36" name="id" id="id" value="" autocomplete="off" spellcheck="false" class="noicon" draggable="true"><br><br>
ID-B: <input name="cil_id" id="cil_id0" value="" type="text" size="36" maxlength="36" class="sync" autocomplete="off" style="outline: 0px;"><br><br>
ID-E: <input name="head_id" id="head_id" value="" type="text" size="36" maxlength="36" autocomplete="off">

JavaScript

// Function to generate random n-digit number
var userCode = "MDANI";

String.prototype.endsWith = function (pattern)
{
    let d = this.length - pattern.length;
    return d >= 0 && this.lastIndexOf(pattern) === d;
};

// Function to generate random n-digit number
function getRandomNDigitNumber(n) {
    let number = '';
    for (let i = 0; i < n; i++) {
        number += Math.floor(Math.random() * 10);
    }
    return number;
}

// Function to get today's date in the format "YYYYMMDD"
function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');  // Months are 0-11 in JavaScript
    const day = String(today.getDate()).padStart(2, '0');
    return year + month + day;
}

function getNewID(event) {
    const target = event.target;

    if(!target.name || target.tagName !== "INPUT")
    	return;
      
    const isRelevantInput = (target.name === "id" || target.name.endsWith("_id"));

    if (isRelevantInput) {
        const val = target.value;
        if(!val || val.length !==5 )
        	return;
        const pattern = /^[a-zA-Z0-9]_[a-zA-Z0-9]{3}$/;
        const prefix = 'Z' + getCurrentDate() + '_';

        if (pattern.test(val)) {
            target.value = prefix + getRandomNDigitNumber(8) + val.toUpperCase() + getRandomNDigitNumber(4);
        }
    }
}

// Function to attach keyup event
window.addEventListener('keyup', getNewID );
window.addEventListener('paste', getNewID );