Validando slug de url

Um site que tenha mais de uma página geralmente terá slugs, caso não esteja familiarizado com o termo, slug nada mais é que, a parte final da URL, sendo tudo que vem após a ultima "/" na url.

Neste exemplo vamos supor que páginas dinâmicas de um site são criadas através de um formulário, um post de blog, um evento de alguma plataforma ou um produto de uma loja virtual servem como exemplo real. O que vamos fazer é, criar um regra para validar o input com a slug e tornar ela válida no momento em que está sendo digitada.

Considerando que existe um input com o id slug vamos para o codigo javascript

let slug = document.getElementById('slug');

slug.addEventListener('keyup', (ev) => {
	const x = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;';
	const y = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------';
	const regex = new RegExp(x.split('')
	      .join('|'), 'g');

  let validSlug = slug.value
    .toLowerCase() // 1º
    .replace(/\s+/g, '-') // 2º
    .replace(/\_/g, '-') // 3º
    .replace(regex, char => y.charAt(x.indexOf(char))) // 4º
    .replace(/[^\a-z0-9\-]+/g, '') // 5º
    .replace(/\-\-+/g, '-') // 6º
    .replace(/^-+/, '') // 7º
    .replace(/-+$/, ''); // 8º


  slug.value = validSlug;
});

Agora vamos passar por cada função chamada e explicar o que ela faz:

1º converte toda a string para caracteres minúsculo;

2º converte todos os espaços em em traço;

3º converte underline para traço;

4º converte todos os caracteres com acento ou especiais determinados na regex para sua versão simples;

5º remove todos os caracteres que são diferente de letras minúsculas ou números;

6º converte múltiplos traços em sequência para traço único;

7º remove traços no inicio da string;

8º remove traços no final da string.

A ordem é importante neste caso pois cada tratamento complementa o próximo, por exemplo, ao remover os caracteres diferentes de letra ou número, letras com acento já foram convertidas para sua versão simples e passarão na validação, ou então, a slug sempre terá apenas uma ocorrência de traço pois todos os traços em sequência que foram criados, no final da validação serão convertidos para apenas um.

Assim, temos um validador tornando o slug limpo e otimizado. Você pode alterar a função de acordo com a sua necessidade, neste exemplo apenas utilizei algumas boas praticas.

Bônus

A url de uma página é um fator utilizado para SEO, para melhorar ainda mais sua url e ter um bom ranking das suas páginas tem as seguintes dicas:

• Mantenha seu slug curto e com um fácil entendimento sobre o que a página se refere
• Seja objetivo evitando caracteres desnecessários como "a", "o", "de" e etc.
• Identifique as palavras chave do seu slug e dê o seu devido destaque.
• Porém não abuse das palavras chave, seu slug pode ficar sem sentido e os indexadores geralmente identificam quando está em excesso.