API tools faq
paste
Advertisement
MizunoBrasil

Gera Link (Javascript)

MizunoBrasil
Jun 13th, 2024
613
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.49 KB | None | 0 0
raw download clone embed print report
  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
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!