Tecnologia

JavaScript: como gerar um slug de URL a partir de um título

Este artigo detalha como gerar automaticamente um slug de URL a partir de um título, utilizando funções nativas do JavaScript.

por Geison Souza 15.10.2024 (00:27)05.01.2025 (01:31)

compartilhe

O slug de uma URL é a parte que identifica de forma única uma página em um site. Geralmente, ele é gerado a partir do título da página, passando por um processo de conversão para um formato adequado à web.

Neste artigo, focado em JavaScript, você aprenderá como gerar um slug de URL em tempo real, à medida que insere uma sequência de caracteres (como um título, por exemplo) em um campo de entrada.

A conversão utilizada neste exemplo segue o padrão de slugs na web, que aceita apenas letras minúsculas (sem acentos), números e hifens. Por exemplo, o título "Como Criar uma Página de Contato" seria convertido no seguinte slug: "como-criar-uma-pagina-de-contato".

HTML: entrada e saída

Vamos iniciar com o desenvolvimento do código HTML. A proposta é criar dois campos: o primeiro será um campo de entrada, onde será possível digitar livremente; o segundo será um campo de saída, que exibirá tudo o que foi digitado no campo de entrada, mas convertido em um slug de URL. Veja o exemplo abaixo:

Bloco #1<input placeholder="Digite o título aqui" type="text" id="titulo" oninput="gerarSlug()">

<div id="slug-gerado" data-placeholder="Slug gerado"></div>

Explicação do código acima:

O campo de entrada (<input>) com o id "titulo" é onde o título desejado é inserido. O evento oninput chama a função gerarSlug() sempre que o valor do campo é alterado.
O slug gerado será exibido no campo de saída (<div>) com o id "slug-gerado".

JavaScript: função para gerar o slug

Agora, vamos implementar a função JavaScript que vai transformar o texto digitado em um slug de URL. Vamos usar algumas funções nativas do JavaScript, como normalize(), replace() e toLowerCase(), para limpar e formatar o texto adequadamente.

Bloco #2function gerarSlug()
{
	titulo = document.getElementById("titulo").value;

	slug = titulo.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

	slug = slug.toLowerCase();

	slug = slug.replace(/[^a-z0-9\s-]+/g, "");

	slug = slug.replace(/\s+/g, "-");

	slug = slug.replace(/-+/g, "-");

	slug = slug.replace(/^-+|-+$/g, "");

	document.getElementById("slug-gerado").textContent = slug;
}

Explicação do código acima:

document.getElementById("titulo").value: Captura o valor inserido no campo de entrada.
normalize("NFD") e replace(/[\u0300-\u036f]/g, ""): Essa combinação é responsável por remover os acentos dos caracteres.
toLowerCase(): Converte todas as letras para minúsculas.
replace(/[^a-z0-9\s-]/g, ""): Remove tudo que não for letras minúsculas, números, espaços ou hifens.
replace(/\s+/g, "-"): Substitui um ou mais espaços por um único hífen.
replace(/-+/g, "-"): Remove sequências de hifens consecutivos, mantendo apenas um.
replace(/^-+|-+$/g, ""): Remove hifens indesejados do início e do fim do slug.
document.getElementById("url").textContent = slug: Exibe o slug gerado no campo de saída.

Código completo

Para finalizar, vamos combinar o código do Bloco #1 com o JavaScript do Bloco #2 dentro de uma estrutura HTML básica. Também iremos incluir CSS para melhorar a aparência. Veja o exemplo a seguir:

Bloco #3<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EXEMPLO</title>

		<style>

			* {font-family: "Arial", sans-serif; font-size: 18px; letter-spacing: 0.5px; padding: 0; margin: 0; border: none; outline: 0; color: #000;}

			body {display: flex;}

			.box {margin: 100px auto;}

			#titulo, #slug-gerado {padding: 30px; width: 1000px;}

			#titulo {background-color: #e0e0e0; border-radius: 10px 10px 0 10px;}

			#titulo::placeholder {color: #888; font-style: italic;}

			#slug-gerado {margin-top: 40px; background-color: #cee4fb; border-radius: 10px;}

			#slug-gerado:empty:before {content: attr(data-placeholder); color: #888; font-style: italic;}

		</style>

	</head>
	<body>

		<div class="box">

			<input placeholder="Digite o título aqui" type="text" id="titulo" oninput="gerarSlug()">

			<div id="slug-gerado" data-placeholder="Slug gerado"></div>

		</div>

		<script>
			function gerarSlug()
			{
				titulo = document.getElementById("titulo").value;

				slug = titulo.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

				slug = slug.toLowerCase();

				slug = slug.replace(/[^a-z0-9\s-]+/g, "");

				slug = slug.replace(/\s+/g, "-");

				slug = slug.replace(/-+/g, "-");

				slug = slug.replace(/^-+|-+$/g, "");

				document.getElementById("slug-gerado").textContent = slug;
			}
		</script>

	</body>
</html>

Conclusão

Seguindo este exemplo, você poderá desenvolver uma ferramenta que, ao receber uma sequência de caracteres, como um título, no campo de entrada, a função JavaScript converte essa sequência em um slug de URL e a exibe no campo de saída.

Se tiver dúvidas ou encontrar algum erro neste artigo, sinta-se à vontade para entrar em contato conosco através do e-mail de suporte do EngenhoBIT.