Advertisement
MizunoBrasil

Gera Link (Javascript)

Jun 13th, 2024
548
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Gerador de Links</title>
  7. <style>
  8.     body {
  9.         font-family: Arial, sans-serif;
  10.         margin: 20px;
  11.     }
  12.     textarea {
  13.         width: 100%;
  14.         height: 200px;
  15.         margin-top: 10px;
  16.         font-size: 14px;
  17.     }
  18.     button {
  19.         padding: 10px 20px;
  20.         font-size: 16px;
  21.         cursor: pointer;
  22.     }
  23.     .links-container {
  24.         margin-top: 20px;
  25.         border: 1px solid #ccc;
  26.         padding: 10px;
  27.         background-color: #f9f9f9;
  28.     }
  29.     .link-code {
  30.         margin-top: 20px;
  31.         border: 1px solid #ccc;
  32.         padding: 10px;
  33.         background-color: #f9f9f9;
  34.         white-space: pre-wrap;
  35.         overflow-x: auto; /* Para permitir rolagem horizontal se necessário */
  36.     }
  37.     pre {
  38.         white-space: pre-wrap;
  39.         word-wrap: break-word;
  40.     }
  41. </style>
  42. </head>
  43. <body>
  44.     <h2>Gerador de Links com Target _blank</h2>
  45.     <p>Insira os links abaixo, um por linha:</p>
  46.     <textarea id="linksInput" placeholder="Insira os links aqui..."></textarea>
  47.     <button onclick="gerarLinks()">Gerar Código HTML</button>
  48.  
  49.     <div class="links-container">
  50.         <h3>Links gerados:</h3>
  51.         <div id="linksOutput"></div>
  52.     </div>
  53.  
  54.     <div class="link-code">
  55.         <h3>Código HTML:</h3>
  56.         <pre id="htmlCodeOutput"></pre>
  57.         <button onclick="copiarCodigo()">Copiar</button>
  58.     </div>
  59.  
  60.     <script>
  61.         function gerarLinks() {
  62.             // Captura o texto inserido no textarea
  63.             let linksTexto = document.getElementById('linksInput').value.trim();
  64.             // Divide o texto em linhas
  65.             let linksArray = linksTexto.split('\n').filter(link => link.trim() !== '');
  66.  
  67.             // Gera os links clicáveis e o código HTML
  68.             let linksHtml = '';
  69.             let htmlCode = '';
  70.  
  71.             linksArray.forEach(link => {
  72.                 let trimmedLink = link.trim();
  73.                 linksHtml += `<p><a href="${trimmedLink}" target="_blank">${trimmedLink}</a></p>`;
  74.                 htmlCode += `<a href="${trimmedLink}" target="_blank">${trimmedLink}</a><br>`;
  75.             });
  76.  
  77.             // Exibe os links gerados
  78.             document.getElementById('linksOutput').innerHTML = linksHtml;
  79.  
  80.             // Exibe o código HTML gerado
  81.             document.getElementById('htmlCodeOutput').textContent = htmlCode;
  82.         }
  83.  
  84.         function copiarCodigo() {
  85.             // Seleciona o elemento <pre> que contém o código HTML
  86.             let codigoHtml = document.getElementById('htmlCodeOutput');
  87.            
  88.             // Cria um elemento de textarea auxiliar para copiar o texto
  89.             let textarea = document.createElement('textarea');
  90.             textarea.value = codigoHtml.textContent;
  91.             textarea.setAttribute('readonly', '');
  92.             textarea.style.position = 'absolute';
  93.             textarea.style.left = '-9999px';
  94.             document.body.appendChild(textarea);
  95.            
  96.             // Seleciona e copia o texto dentro do textarea auxiliar
  97.             textarea.select();
  98.             document.execCommand('copy');
  99.            
  100.             // Remove o textarea auxiliar
  101.             document.body.removeChild(textarea);
  102.            
  103.             // Mostra feedback ao usuário
  104.             alert('Código HTML copiado para a área de transferência!');
  105.         }
  106.     </script>
  107. </body>
  108. </html>
  109.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement