Separar texto

rdpacato · Abril 13, 2018

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

kim.y · Abril 15, 2018

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/

Klawztro · Abril 16, 2018

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!

Entrar

Arquivado

Separar texto

Recommended Posts

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

kim.y 11

Compartilhar este post

Link para o post

Compartilhar em outros sites

Klawztro 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante