JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div class="container-fluid mt-3">
  <div class="row ">
    <div class="col-12">
      <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
        <label for="floatingTextarea2">Entrada</label>
      </div>
    </div>
  </div>
  <div class="row resultado"></div>
</div>

JavaScript

var Entrada = document.querySelector('textarea'),
Resultado = document.querySelector('.resultado');
var Filtros = [{
  tipo: "Nombre",
  regex: /[a-z]+(\s[a-z]+)+/i
}, {
  tipo: "Número de Control",
  regex: /[^\s\d]?\d{8}/
}, {
  tipo: "Fecha de Nacimiento",
  regex: /(0\d|[12]\d|3[01])\/(0\d|[1][0-2])\/\d{4}/
}, {
  tipo: "Correo Electronico",
  regex: /[a-z0-9\.]+@[a-z0-9]+\.[a-z0-9\.]{3}/i
}];

Entrada.addEventListener('keyup', Buscar);

function Buscar() {
let remplace = [];
  Filtros.forEach(f => {
  if(f.regex.test(Entrada.value)){
  remplace.push(`<div class="col-6"><div class="card text-dark bg-light my-3" style="max-width: 18rem;">
  <div class="card-header">${f.tipo}</div>
  <div class="card-body">
    <p class="card-text">${Entrada.value.match(f.regex)[0]}</p>
  </div>
</div></div>`);
  }
  });
  Resultado.innerHTML = remplace.join('');
}