Criando um Slug a partir de uma String com JavaScript e Expressão Regular

Sem dúvida a geração de URLs Amigáveis (para os íntimos Slugs) pode se tornar uma árdua tarefa, justamente porque aqui no Brasil, onde temos uma língua de origem no latina, assim como outros países que possuem caracteres com acentos, letras diferentonas e algumas outras particularidades podemos facilmente estragar (literalmente) aquelas funções bonitas que vemos em desenvolvedores americanos-ingleses, etc…

Foi justamente por conta desse problema que precisei adaptar e dar um fork no GitHub neste código (que foi muito bem feito pelo Mathew) para tratar caracteres especiais.

E é exatamente com esta pequena função que eu tomei vergonha na cara e estreei (sim apenas no fim de 2017) no aclamado GitHub. Para quem quiser me seguir, meu user é gabrielfroes.

Fiz algumas adaptações, mas a principal foi a de tratar os caracteres especiais (incluindo aí as acentuações), mas também a de utilizar a função através do prototype String. Dessa forma temos uma função mais estilosa e mais prática.

Segue o código:

/* 
	Create SLUG from a string
	This function rewrite the string prototype and also 
	replace latin and other special characters.

	Forked by Gabriel Fróes - https://gist.github.com/gabrielfroes
	Original Author: Mathew Byrne - https://gist.github.com/mathewbyrne/1280286
 */
if (!String.prototype.slugify) {
	String.prototype.slugify = function () {

	return  this.toString().toLowerCase()
	.replace(/[àÀáÁâÂãäÄÅåª]+/g, 'a')       // Special Characters #1
	.replace(/[èÈéÉêÊëË]+/g, 'e')       	// Special Characters #2
	.replace(/[ìÌíÍîÎïÏ]+/g, 'i')       	// Special Characters #3
	.replace(/[òÒóÓôÔõÕöÖº]+/g, 'o')       	// Special Characters #4
	.replace(/[ùÙúÚûÛüÜ]+/g, 'u')       	// Special Characters #5
	.replace(/[ýÝÿŸ]+/g, 'y')       		// Special Characters #6
	.replace(/[ñÑ]+/g, 'n')       			// Special Characters #7
	.replace(/[çÇ]+/g, 'c')       			// Special Characters #8
	.replace(/[ß]+/g, 'ss')       			// Special Characters #9
	.replace(/[Ææ]+/g, 'ae')       			// Special Characters #10
	.replace(/[Øøœ]+/g, 'oe')       		// Special Characters #11
	.replace(/[%]+/g, 'pct')       			// Special Characters #12
	.replace(/\s+/g, '-')           		// Replace spaces with -
    .replace(/[^\w\-]+/g, '')       		// Remove all non-word chars
    .replace(/\-\-+/g, '-')         		// Replace multiple - with single -
    .replace(/^-+/, '')             		// Trim - from start of text
    .replace(/-+$/, '');            		// Trim - from end of text
    
	};
}

Create SLUG from a string

This function rewrite the string prototype and also

replace latin and other special characters.

Forked by Gabriel Fróes - https://gist.github.com/gabrielfroes

Original Author: Mathew Byrne - https://gist.github.com/mathewbyrne/1280286

if (!String.prototype.slugify) {

String.prototype.slugify = function () {

return this.toString().toLowerCase()

.replace(/[àÀáÁâÂãäÄÅåª]+/g, 'a') // Special Characters #1

.replace(/[èÈéÉêÊëË]+/g, 'e') // Special Characters #2

.replace(/[ìÌíÍîÎïÏ]+/g, 'i') // Special Characters #3

.replace(/[òÒóÓôÔõÕöÖº]+/g, 'o') // Special Characters #4

.replace(/[ùÙúÚûÛüÜ]+/g, 'u') // Special Characters #5

.replace(/[ýÝÿŸ]+/g, 'y') // Special Characters #6

.replace(/[ñÑ]+/g, 'n') // Special Characters #7

.replace(/[çÇ]+/g, 'c') // Special Characters #8

.replace(/[ß]+/g, 'ss') // Special Characters #9

.replace(/[Ææ]+/g, 'ae') // Special Characters #10

.replace(/[Øøœ]+/g, 'oe') // Special Characters #11

.replace(/[%]+/g, 'pct') // Special Characters #12

.replace(/\s+/g, '-') // Replace spaces with -

.replace(/[^\w\-]+/g, '') // Remove all non-word chars

.replace(/\-\-+/g, '-') // Replace multiple - with single -

.replace(/^-+/, '') // Trim - from start of text

.replace(/-+$/, ''); // Trim - from end of text

};

}

No GitHub você encontrará no endereço: https://gist.github.com/gabrielfroes/e90a53f96ed71fb201d133395003ada4

Um exemplo muito simples de utilização seria:

var frase = "O site Código Fonte é o melhor da tecnologia de [a-Z].";
var url = frase.slugify();

1 2	var frase = "O site Código Fonte é o melhor da tecnologia de [a-Z]."; var url = frase.slugify();

É isso, espero que essa função seja útil para vocês!

Gabriel Fróes

Autor

Apaixonado por tecnologia, desde que me entendo por gente gosto de computadores e afins. Aprendi sistema binário aos 9 anos (usando caixinha de fósforos e ervilhas) e desde então nunca mais parei de estudar e aprender coisas novas sobre tecnologia. Sou operário da codificação desde 1996 onde tive oportunidade de trabalhar em projetos sensacionais dentro da GE, Xerox, BNDES entre outras empresas. Atualmente estou envolvido na área de desenvolvimento de negócios.

Ver todas as publicações de Gabriel Fróes

Você pode se interessar

Pipeline (CD/CI) // Dicionário do Programador

Vídeos

8 visualizações

Vídeos

8 visualizações

Pipeline (CD/CI) // Dicionário do Programador

Thais Cardoso de Mello - 11 de novembro de 2019

Continuous Integration e Continuous Delivery Pipeline ou CI/CD Pipeline, ou ainda Continuous Delivery Pipeline, ou Pipeline para os íntimos é um processo que vem sendo amplamente utilizado nas empresas de desenvolvimento.

Promoções de Jogos do Final de Semana (09/11)

Notícias

16 visualizações

Notícias

16 visualizações

Promoções de Jogos do Final de Semana (09/11)

Carlos L. A. da Silva - 9 de novembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Vídeos

8 visualizações

Vídeos

8 visualizações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Thais Cardoso de Mello - 7 de novembro de 2019

Quais os caminhos para o profissional de Data Science se reconhecido no mercado? Nesse vídeo contamos com a ajuda dos especialistas da Faculdade Impacta pra encontrar a resposta.

Pipeline (CD/CI) // Dicionário do Programador

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Swift (a linguagem do iOS) // Dicionário do Programador

VAGA PERFEITA? Reagindo a Vagas de Estágio 2: A Missão // Vlog React #104

Serverless // Dicionário do Programador

Pipeline (CD/CI) // Dicionário do Programador

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Swift (a linguagem do iOS) // Dicionário do Programador

VAGA PERFEITA? Reagindo a Vagas de Estágio 2: A Missão // Vlog React #104

Serverless // Dicionário do Programador

Criando um Slug a partir de uma String com JavaScript e Expressão Regular

Gabriel Fróes

Autor

Você pode se interessar

Pipeline (CD/CI) // Dicionário do Programador

Promoções de Jogos do Final de Semana (09/11)

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Mais publicações

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Promoções de Jogos do Final de Semana (01/11)

Brasil, o país do podcast

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Promoções de Jogos do Final de Semana (01/11)

Pipeline (CD/CI) // Dicionário do Programador

Promoções de Jogos do Final de Semana (09/11)

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Receba nossas novidades em seu e-mail!

Quem somos

Pipeline (CD/CI) // Dicionário do Programador

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Swift (a linguagem do iOS) // Dicionário do Programador

VAGA PERFEITA? Reagindo a Vagas de Estágio 2: A Missão // Vlog React #104

Serverless // Dicionário do Programador

Pipeline (CD/CI) // Dicionário do Programador

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Swift (a linguagem do iOS) // Dicionário do Programador

VAGA PERFEITA? Reagindo a Vagas de Estágio 2: A Missão // Vlog React #104

Serverless // Dicionário do Programador

Criando um Slug a partir de uma String com JavaScript e Expressão Regular

Gabriel Fróes

Autor

Você pode se interessar

Pipeline (CD/CI) // Dicionário do Programador

Promoções de Jogos do Final de Semana (09/11)

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Mais publicações

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Promoções de Jogos do Final de Semana (01/11)

Brasil, o país do podcast

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Promoções de Jogos do Final de Semana (01/11)

Pipeline (CD/CI) // Dicionário do Programador

Promoções de Jogos do Final de Semana (09/11)

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Aprenda a acelerar a performance de sites com “premonição”

Swift (a linguagem do iOS) // Dicionário do Programador

Receba nossas novidades em seu e-mail!

Quem somos

Siga-nos