Javascript como pegar a primeira palavra de uma string em JAVASCRIPT

b.0463 · 1 de julho de 2021

estou tentando criar um interpretador de codico simples. mais queria criar comandos como (background (a cor)) mais ate agora só consegui fazer uma palavra de codico. para descomplicar é isso:

var rest = document.getElementById('rest');//pega a saida de resposta no html
function testa(){
    var comando = document.getElementById('com').value;//pega a entrada de comando no html
    var comandopr = //aqui queria um comando onde pega a primeira palavra de (comando)
    var comandosg = //aqui queria um comando onde pega a segunda palavra de (comando)
    if(comandopr == "help") {  //aqui testa para ver se é help a primeira palavra
        switch(comandosg) {  //seta a segunda palavra
          	case ""://pega o help puro
            	var resposta = "lista de comandos:<br>"+
                "help<br>"+
                "outros comandos...<br>";
            
            case "discord":  //se a palavra 1 de comando for help e a segunda for discord. \/
                var resposta = "digite discord para obter o discord";  //entregar discord. assim por diante
                break;
            case "mail":
                var resposta = "digite mail para obter o gmail";
                break;
            default:
                var resposta = "[ERROR:000] algo deu errado. revise o comando. ou use help" //caso não tenha em help
                break;
        }
    } else {
        var resposta = "[ERROR:001] algo deu errado. revise o comando ou use help para ver os comandos" //caso não encontre o comando (usado no final)
    }
    rest.innerHTML = resposta; // responde em res.
}

assim então seria:

input: (um comando qualquer que não seja help)

output: [ERROR:001] algo deu errado. revise o comando ou use help para ver os comandos

input: help

output: lista de comandos ......

input: help discord

output: digite discord para obter o discord

assim por diante.

caso ajude o html é este:

<!DOCTYPE html>

<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="geral">
			<input type="text" value="comando" id="com"><br>
			<button id="mandar" onclick="testa()">mandar</button>
			<div id="rest">rest</div>
		</div>
		<script src="js/main.js"></script>
	</body>
</html>

tem uma solução em jqueri que tentei porque sempre que pesquiso (javascript) aparece (jqueri) mas não funcionou.passei a madrugada ontem pesquisando e não achei. então obrigado ja por quem consegui me ajudar.

Edmilson Barreto · 1 de julho de 2021

Seguinte amigo, acho que você está fazendo duas variáveis para uma coisa que não é tão necessária assim, vou tentar te ajudar de uma forma usando Desconstrução de Array e Spread Operator, procura tentar entender os códigos e buscar na documentação esses dois, e também do método Split

var entrada = "help discord comando01"

[primeiroComando, ...resto] = entrada.split(" ")

Pronto, agora você tem duas variaveis, a Primeiro Comando e o Resto

entrada.split(" ") => ["help", "discord", "comando01"]

o que eu fiz em baixo foi desconstruir esse array em duas variaveis, uma primeiroCOmando, que vai receber a primeira palavra, e o resto, que como eu usei o spread (...), ele vai receber o resto

Testa ai manin, e avisa se der certo hehehe! tamo junto!

Marcelo Calazans · 1 de julho de 2021

@b.0463

Olá, colega.

Abaixo tem um exemplo prático:

<html>

<body>

<script>
const frase = 'Estamos todos unidos';

const palavra1 = frase.split(' ');
alert(palavra1[0]);
/* Primeira Palavra */

const palavra2 = frase.split(' ');
alert(palavra2[1]);
/* Segunda Palavra */

const palavra3 = frase.split(' ');
alert(palavra3[2]);
/* Terceira Palavra */

</script>

</body>

</html>

Foi testado aqui e funciona.

Espero que ajude.

Abraços.

b.0463 · 1 de julho de 2021

@Marcelo Calazans e @Edmilson Barreto eu ja tentei esse metodo e da "split não fefinido" vou tentar novamente para conferir. mais de qualque jeito obrigado

1 hora atrás, Edmilson Barreto disse:
Seguinte amigo, acho que você está fazendo duas variáveis para uma coisa que não é tão necessária assim, vou tentar te ajudar de uma forma usando Desconstrução de Array e Spread Operator, procura tentar entender os códigos e buscar na documentação esses dois, e também do método Split
var entrada = "help discord comando01"

[primeiroComando, ...resto] = entrada.split(" ")
Pronto, agora você tem duas variaveis, a Primeiro Comando e o Resto

entrada.split(" ") => ["help", "discord", "comando01"]

o que eu fiz em baixo foi desconstruir esse array em duas variaveis, uma primeiroCOmando, que vai receber a primeira palavra, e o resto, que como eu usei o spread (...), ele vai receber o resto

Testa ai manin, e avisa se der certo hehehe! tamo junto!

como teve 2 respostas vou por como solução o membro junior para dar ponto

Edmilson Barreto · 1 de julho de 2021

Então a treta está na busca do input, não deveria dar essa treta, pode mostrar alguma print do código rodando e o erro?

Marcelo Calazans · 2 de julho de 2021

6 horas atrás, b.0463 disse:

eu ja tentei esse metodo e da "split não fefinido"

Aqui comigo, como eu havia dito, funciona perfeitamente usando uma cópia do seu próprio exemplo:

<!DOCTYPE html>

<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- <link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css">-->
	</head>
	
	<body>
		<div id="geral">
			<input type="text" value="comando" id="com"><br>
			<button id="mandar" onclick="testa()">mandar</button>
		</div>
		<!-- <script src="js/main.js"></script> -->
		
		
	<script>
  function testa(){
    var comando = document.getElementById('com').value;//pega a entrada de comando no html    
    
    const frase = comando;

    const palavra1 = frase.split(' ');
    
    var comandopr = palavra1[0];
    
    if(comandopr == "help" || comandopr == "HELP" || comandopr == "Help") {  alert("A primeira palavra é Help"); }    
     
  }
	</script>			
		
	</body>	
	
</html>

Abraços e espero ter ajudado.

Rui Guilherme · 2 de julho de 2021

Como deu "split" não definido quer dizer que sua váriavel não está vinda como String, vale lembrar que o split é um prototype de String.

Esse código por exemplo vai dar "split não definida":

const exemplo = 1

exemplo.split(' ')

Spoiler

Para evitar essa issue eu recomendo escrever a função da seguinte forma:

  function testa() {
    // Essa "??" é apenas para evitar undefined ou null;
    const frase = document.getElementById('com').value ?? ""; //pega a entrada de comando no html    
    
    if (frase.length <= 0 || typeof frase !== "string") {
    	alert("Você precisa digitar alguma coisa válida");
      	return false;
    }
    
    // Por se tratar de uma array, você pode rodar isso dentro um map para trabalhar com os valores individualmente. 
    // é uma boa ideia tratar a frase com o split para evitar espaços no começo da frase.
    const palavra1 = frase.trim().split(' ');
    
    const primeiraPalavraNaoTratada = palavra1[0]
    const primeiraPalavraTratada = primeiraPalavraNaoTratada.toLowerCase()
        
    if(primeiraPalavraTratada === "help") { 
      alert(`A primeira palavra é ${primeiraPalavraNaoTratada}`);
    } 
  }