Gerador de Slug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link href="https://fonts.cdnfonts.com/css/lucida-grande" rel="stylesheet">
    <title>Gerador de SLUG</title>
</head>
<style>
    body {
    font-family: 'Lucida Grande', sans-serif;
    font-size: 15px;
    }
    </style>
<body>
    <br>
    <div class="container">
        <h4>Gerador de Slug</h4>


<form action="#" method="post" class="slug-form container mt-5">
  <div class="form-group">
    <label>Entrada: (Título do artigo, título do tutorial ou qualquer título de página da web)</label>
    <input type="text" name="name" id="inputText" class="form-control">
  </div>
  <button type="button" id="convertButton" class="btn btn-primary">Gerar Slug</button>
  <br><br>
  <div class="form-group">
    <label>Slug Gerado:</label>
    <input type="text" name="slug" id="outputText" class="form-control">
  </div>
</form>
<br><br><br>

<script>
  const form = document.querySelector('.slug-form');
  const inputText = form.querySelector('#inputText');
  const outputText = form.querySelector('#outputText');
  const convertButton = form.querySelector('#convertButton');

    convertButton.addEventListener('click', function() {
    const inputValue = inputText.value;
    const slug = inputValue.toLowerCase()
      .replace(/[áàãâä]/g, 'a')
      .replace(/[éèêë]/g, 'e')
      .replace(/[íìîï]/g, 'i')
      .replace(/[óòõôö]/g, 'o')
      .replace(/[úùûü]/g, 'u')
      .replace(/[ç]/g, 'c')
      .replace(/[ñ]/g, 'n')
      .replace(/[^a-z0-9 ]/g, '')
      .replace(/\s+/g, '-')

    outputText.value = slug;

    // Copiar para a área de transferência
outputText.select();
document.execCommand("copy");

// Exibir mensagem de alerta
alert("O slug foi gerado e copiado para a área de transferência!");


  });

</script>
    </div>

    </body>
    </html>