Suffering to create a regular expression-CodePudding

I am creating an asset management system where said asset was assigned a control number.

This code consists of type of options the first one is It starts with the letter P is capitalized, followed by a number ranging from 0-7, then a hyphen, then three or two uppercase letters, followed by a hyphen and ends with a 5 digit.

This regular expression

/^((P){1}[0-7]{1})-([A-Z]{2,3})-([0-9]{5})$/

has already been created and works correctly. My problem is with the second option which starts with SOT, then a hyphen, then three or two uppercase letters, followed by a hyphen and ends with a 5 digit.

My interpretation of this expression was

/^SOT-([A-Z]{2,3})-([0-9]{5})$/

But when I check that it is correct I get my own "pattern does not match" message and I have been looking for hours for the error. If you got as far as thanks for reading and helping me.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Rubik Vinyl&display=swap" rel="stylesheet">
<title>Busqueda</title>
</head>
<body>
<header >
    <?php include 'templates/header.php' ?>
</header>

<aside >
    <?php include 'templates/menu.php'; ?>
</aside>

<main>
    <h1>Búsqueda</h1>
        <div >
                <label for="select">Buscar por:</label>
            <select id="select" name="select">
                <option value=''>---Seleccione---</option>  
                <option value="B">N° Bien</option>
                <option value="C">N° Control</option>
            </select>
                <input type="text" name="valor" id="valor" >
                <button name="btn-buscar"  id="btn-buscar">Buscar</button>
        </div>
        <div >
            <p ></p>
        </div>
    
</main>

<footer >
    <?php include 'templates/footer.php' ?>
</footer>
</body>
<script type="text/javascript" src="js/select.js"></script>
<script type="module" src="js/index.js"></script>
</html>

 const d=document;

d.addEventListener('DOMContentLoaded', e=>{
detectarOpcion();
});

function detectarOpcion () {
let $input=d.getElementById('valor'),
 $boton=d.getElementById('btn-buscar'),
 $mensaje=d.querySelector('.mensaje');
 $div=d.querySelector('.contenedor-select');

d.querySelector('#select').addEventListener('change', e=>{
console.log(e.target.value);

if (e.target.value==='B') {
 $input.classList.remove('none');
 $boton.classList.remove('none');

 $input.addEventListener('keyup', e=>{
    if ($input.value==='') {
        $mensaje.textContent='El campo es requerido';
        $mensaje.classList.remove('none');
        $mensaje.classList.add('is-active');
        $boton.disabled=true;
        $div.appendChild($mensaje);
    }
    if (!$input.value.match(/^[0-9]{6,7}$/)) {
        
        $mensaje.textContent='Debe ser un número de 6 o 7 digitos';
        $mensaje.style.textAlign = 'center';
        $mensaje.style.width = '62%' 
        $mensaje.classList.remove('none');
        $mensaje.classList.add('is-active');
        $boton.disabled=true;
        $div.appendChild($mensaje);
    }else{
        $mensaje.classList.remove('is-active');
        $mensaje.classList.add('none');
        $boton.disabled=false;
    }
 })


} if (e.target.value==='C') {
    $input.classList.remove('none');
    $boton.classList.remove('none');

    $input.addEventListener('keyup', e=>{
    if ($input.value==='') {
        $mensaje.textContent='El campo es requerido';
        $mensaje.classList.remove('none');
        $mensaje.classList.add('is-active');
        $boton.disabled=true;
        $div.appendChild($mensaje);
    }
    if (!$input.value.match(/^((P){1}[0-7]{1})-([A-Z]{2,3})-([0-9]{5})$/) || !$input.value.match(/^SOT-([A-Z]{2,3})-([0-9]{5})$/)) {
        
        $mensaje.textContent='No cumple con el patrón';
        $mensaje.style.textAlign = 'center';
        $mensaje.style.width = '62%' 
        $mensaje.classList.remove('none');
        $mensaje.classList.add('is-active');
        $boton.disabled=true;
        $div.appendChild($mensaje);
    }else if () {
        
    }else{
        $mensaje.classList.remove('is-active');
        $mensaje.classList.add('none');
        $boton.disabled=false;
    }
 })


} if (e.target.value==='') {
    $input.classList.add('none');
    $boton.classList.add('none');
        
 }  

});


}

CodePudding user response：

Your regex is correct, but your test here is wrong:

if (!$input.value.match(/^((P){1}[0-7]{1})-([A-Z]{2,3})-([0-9]{5})$/) || !$input.value.match(/^SOT-([A-Z]{2,3})-([0-9]{5})$/)) {

You're using OR on two negatives. If a code matches the first regex it won't match the second and the expression is true, and vice versa.

Try this form:

if ($input.value.match(/^((P){1}[0-7]{1})-([A-Z]{2,3})-([0-9]{5})$/) ||
     $input.value.match(/^SOT-([A-Z]{2,3})-([0-9]{5})$/)) {
  // Value matches successfully
} else {
 // Value doesn't match
}

Alternatively, build both options into one regex, then there's only one test to do:

if ($input.value.match(/^(SOT|P[0-7])-([A-Z]{2,3})-([0-9]{5})$/)) {
   // Match
} else {
   // No match
}

This looks for SOT or P0 to P7 in the first group, then carries on as before.