Publicado em 13 de abr.

Separar texto

Olá pessoal tudo bom?

Fiz esse código que separa vogal e consoante (na ordem que lê) mas acho que ficou grande e o pior, não consegui juntar tudo em um resultado só.

<html>
<head>
	<title>Separa Palavra - Vogais e Consoantes</title>
<script>

 window.onload = function(){
 var campoVogal = document.getElementById("resultadoVogais");
 var campoConsoante = document.getElementById("resultadoConsoantes");
	var campoVogalConsoante = document.getElementById("resultadoVogalConsoante");
 var campoOutros = document.getElementById("resultadoOutros");

 var botao = document.getElementById("separar");

 var vogais = ["a","e","i","o","u"];
 var consoantes = ["b","c","d","f","g","h","j","k","l","m","n","p","q","r","s","t","v","x","w","y","z"];

 botao.onclick = function(){
 var string = document.getElementById("s").value;
 string = string.toLowerCase();
 campoVogal.innerHTML = "<h3>Vogais</h3>";
 campoConsoante.innerHTML = "<h3>Consoantes</h3>";
 campoVogalConsoante.innerHTML = "<h3>VogalConsoante</h3>"
 campoOutros.innerHTML = "<h3>Outros</h3>"

	for (i = 0; i < string.length; i++ ) {
 if(vogais.indexOf(string[i]) != -1) {
 console.log(string[i]);
 campoVogal.innerHTML += "<font color='green'>"+ string[i] +"<br></font>";
 } else if(consoantes.indexOf(string[i]) != -1) {
 console.log(string[i]);
 campoConsoante.innerHTML += "<font color='blue'>"+ string[i] +"<br></font>";
 } else {
 console.log(string[i]);
 campoOutros.innerHTML += "<font color='red'>"+ string[i] +"<br></font>";
 }

	}

 };

 }
</script>
</head>
<body>

 <h3>Digite a palavra:</h3>
 <input type="text" id="s">
 <br />
 <br />
 <button id="separar">Separar</button>
 <br />

 <h1 id="resultadoVogais"></h1>

 <h1 id="resultadoConsoantes"></h1>

 <h1 id="resultadoVogalConsoante"></h1>

 <h1 id="resultadoOutros"></h1>

</body>
</html>

	Alguém sabe fazer mais simples ou colocar a resposta em um lugar só? não separado

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

kim.y· 15 de abr.

Ficou meio confuso o que você quer fazer.

index.html

Spoiler

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <p><input type="text" id="inTexto"></p>
 <input type="button" value="Separar Consoantes de Vogais" id="btSeparar">

 <h3 id="outTexto"></h3>
 <h3 id="outVogais"></h3>
 <h3 id="outConsoantes"></h3>

 <script src="index.js"></script>
</body>
</html>

  

	 

	index.js

 Spoiler

function separarTexto(){
 var inTexto = document.getElementById("inTexto");
 var outTexto = document.getElementById("outTexto");
 var outVogais = document.getElementById("outVogais");
 var outConsoantes = document.getElementById("outConsoantes");

 //split() transforma em array
 var texto = inTexto.value;
 var separar = texto.split("");
 var vogais = "";
 var consoantes = "";
 var arrayVogais = ['a','e','i','o','u'];

 for(i = 0; i < separar.length;i++){
 if(arrayVogais.indexOf(separar[i]) > -1)
 vogais += separar[i];
 else
 consoantes += separar[i];
 }

 outVogais.textContent = vogais;
 outConsoantes.textContent = consoantes;
}

var btSeparar = document.getElementById("btSeparar");

btSeparar.addEventListener("click", separarTexto);

  

	 

	Eu fiz de maneira bem básica porque estou lendo um livro sobre javascript (básico) e estou fazendo como ele ensina.

	 

	Segue o teste:

	[https://jsfiddle.net/60dnmcom/](https://jsfiddle.net/60dnmcom/)

Klawztro· 16 de abr.

Salve pessoal, boa tarde, gostaria de mostrar minha versão, vou postar só o javascript por que não alterei o html nem o css, mas o pacote completo está em:

https://jsfiddle.net/rdLgc3a4/10/

/**
Retirei todo o html para fora do método, porque de outra forma, para que o método ficasse menos acoplado (mais fácil de reutilizar),
seria necessário passar quatro objetos html, e você só poderia usar esse método para html e nada mais (talvez você pudesse utilizar
com um retorno de json por exemplo).
*/
function separarTexto(separar){
/**
Quando você quiser retornar mais de um valor conceitualmente falando (no caso seriam consoantes e vogais), tente retornar um objeto,
porque é mais fácil de entender no futuro, você tem os índices com texto, e isso fica auto explicativo, é melhor do que usar um array com
índice numérico onde você tem que adivinhar o que está em cada índice). */

 var retorno = { vogais : "", consoantes: "" };
 var arrayVogais = ['a','e','i','o','u'];
 //Mais um detalhe IMPORTANTE, utilize var quando for criar uma variável para iterar (no caso o i). Caso contrário, essa variável tem escopo global,
 //ou seja, se você tiver uma variável global com nome de "i" ela vai mudar de valor, isso pode evitar muita dor de cabeça no futuro...
 for(var i = 0; i < separar.length;i++){ //Não precisa converter para array para iterar, da pra usar uma string =)
 if(arrayVogais.indexOf(separar[i]) > -1)
 retorno.vogais += separar[i];
 else
 retorno.consoantes += separar[i];
 }
 return retorno;
}

/**Do resto, use a chamada desta forma, pq, apesar de que fica uma boa quantidade de código aqui, você vai ter seu método mais livre
para reutilizar */

var btSeparar = document.getElementById("btSeparar");
	btSeparar.addEventListener("click", function() {
 var inTexto = document.getElementById("inTexto");
 var outVogais = document.getElementById("outVogais");
 var outConsoantes = document.getElementById("outConsoantes");
 var elementos = separarTexto(inTexto.value);
 outVogais.textContent = elementos.vogais;
 outConsoantes.textContent = elementos.consoantes;
 //alert(i); -- CUIDADO PARA NÃO GERAR VARIÁVEIS GLOBAIS
 });

	Espero que ajude!