Desenvolvimento - Javascript

Como inverter links ou textos com Javascript

Veja neste artigo como criar um inversor de links e textos usando html e javascript.

por Ricardo Arrigoni


Olá pessoal, vejo muita gente reclamar que quando vão fazer download em algum site ou blog, os organizadores colocam o endereço de url invertidos, obrigando os usuários a clicarem em seus parceiros, comprar créditos em celular, etc, o que é muito chato para o usuário.

Pensando nisso eu resolvi escrever esse artigo e ensinar os leitores do Linha de Código a criarem um sistema em javascript que inverte o ou qualquer coisa que colocarmos para inverter. Veremos que se trata de um sistema bem simples e muito, muito útil.

Chega de conversar e vamos logo ao que interessa não é mesmo?

Como todo projeto web, precisaremos criar em primeiro lugar o arquivo .html, que será a página do site.

Nota: No nosso exemplo vou utilizar o Sublime Text2 como editor html, css, javascript, etc, mas você pode ficar a vontade para usar qualquer editor html que queira, caso queira usar também o sublime text2, vou colocar o link de download dele aqui(http://www.sublimetext.com/2) , o editor é muito bom e eu recomendo.

Agora vamos a criação do nosso documento, a estrutura padrão de qualquer documento html pode ser vista na listagem 1.

Listagem 1: Estrutura padrão html

<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Suponhamos aqui que todos já conheçam a estrutura padrão de uma página html e não iremos explicar o que cada uma das tag’s fazem, vamos então começar a montar nossa página.

Listagem 2: Estrutura da página html do exemplo

<html>
<head>
	<title>Invertendo links e textos - Linha de Código</title>
</head>
<body>
<h1>Inverter link ou palavra</h1>
<form>
<input type="text" name="txt" value="" />
<input type="button" id="btn" value="Inverter" onclick="inverter()" />
</form>
</body>
</html>

Agora nosso projeto começa a criar vida, inserimos um título na página e um lugar onde iremos inserir a url/texto para inverter e um botão para fazer a inversão.

Nossa página deve estar com essa aparência:

Aparência da página

Figura 1: Aparência da página

Nós temos basicamente a estrutura toda pronta, mas está faltando o principal, que é a ação de inverter o link, iremos pegar o que for inserido no campo de texto, inverter ele e exibir invertido para o usuário.

Para fazer essa inversão iremos usar o 3 funções nativas do javascript, primeiro vamos usar a função split() para separar a palavra em letras, após isso iremos usar a reverse() para inverter a ordem das letras e por fim usaremos a join() para juntar tudo novamente e exibir o resultado ao usuário.

É um código bem simples de se realizar e veremos como é simples.

Como sabemos podemos escrever um código javascript dentro do próprio código ou usar um arquivo externo. No nosso exemplo, para facilitar o estudo iremos escrever dentro do próprio código, mas ele precisará ficar dentro de uma tag script e essa tag terá de ser inserida dentro da tag head.

A tag script deve ser representada da seguinte forma:

Listagem 2: Representação da tag script

<script type="text/javascript">
    /* Aqui o seu código javascript */
	</script>

Caso queira usar um arquivo externo, fique à vontade, mas você precisará do código da listagem 3 para linkar esses dois arquivos.

Listagem 3: Linkando um arquivo javascript externo

<script type="text/javascript" src="link do seu arquivo javascript"></script>

Agora vamos colocar o código usado para inverter o link dentro de nossa tag script, confira listagem 4.

Listagem 4: Código Javascript

<script type="text/javascript">
    
		function inverter(){
			var inverter = document.getElementsByName("txt");
			valor = inverter.item(0).value.toString().split("");
			normal = valor.reverse().join("");
			document.body.innerHTML += normal + "<br />";
		}

	</script>

Agora, ao colocar o link ou a palavra que queremos inverter no box de texto e clicar em inverter, ela será exibida embaixo invertido.

Explicando o código javascript, nós criamos uma função chamada inverter, essa será a função que será chamada quando clicarmos no botão, por isso o evento onclick="inverter()" no botão.

Pegamos o que foi inserido no input text e separamos em letras com o split(), após isso invertemos e juntamos com o reverse() e join() respectivamente.

O resultado obtido deve ser como o apresentado na figura 2.

Resultado da inversão

Figura 2: Resultado da inversão

Agora qualquer coisa que você colocar no input text vai ser invertido, seja ele link ou texto. Abaixo vou colocar o código fonte completo do artigo, seu código deverá ficar dessa forma.

Listagem 5: Código fonte do artigo

<html>
<head>
	<title>Invertendo links e textos - Linha de Código</title>
	<script type="text/javascript">
    
		function inverter(){
			var inverter = document.getElementsByName("txt");
			valor = inverter.item(0).value.toString().split("");
			normal = valor.reverse().join("");
			document.body.innerHTML += normal + "<br />";
		}

	</script>
</head>
<body>
<h1>Inverter link ou palavra</h1>
<form>
<input type="text" name="txt" value="" />
<input type="button" id="btn" value="Inverter" onclick="inverter()" />
</form>
</body>
</html>

Conclusão

Neste artigo aprendemos a criar um sistema que inverte qualquer texto ou link com html e javascript, espero que tenha sido claro e que tenham aprendido.

Até o próximo artigo.
Ricardo Arrigoni

Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.