3

Eu quero verificar, por exemplo, se a string '01001011' é composta apenas de '0' e '1'.

Estou criando um projeto de aprendizado html para converter binários em decimal, e quero criar uma função que confira se o valor digitado no input seja uma combinação binária, caso contrário, o usuário terá que digitar outro valor. Após isso, ao pressionar 'Enter' a conversão será feita.

<input type="text" id="b-input" onkeypress="convert()">
function convert() {
    const binary = document.getElementById('b-input').value;
    if (binary === '') return alert("Please, enter a binary number");
}
document.getElementById('b-input').onkeypress = function(e) {
    if (e.code == 'Enter') {
        convert();
    } 
}

Por enquanto só consegui verificar se a string é vazia, e criar a função que converte ao pressionar 'Enter'.

4
  • 1
    Pode utilizar expressão regular: ^[01]+$. 15/04/2021 às 18:11
  • ...Estou criando um projeto html para converter binários em decimal... para que? Javascript conta com a função parseInt(string, base) que analisa um argumento string e retorna um inteiro na base especificada. Ex: console.log(parseInt("01001011",2)); retorna 75. 15/04/2021 às 18:57
  • 1
    @AugustoVasques, um projeto de aprendizado? 15/04/2021 às 19:04
  • @JeffersonQuesado, pode ser.... tem uma boa possibilidade. Estou retirando o voto de fechamento. 15/04/2021 às 19:07

5 Respostas 5

7

Bom, não tenho muita experiência com Javascript, mas creio que a forma mais simples de resolver isso seria utilizar expressões regulares (RegEx) para verificar o valor inserido, tal como referido por Luiz Felipe. Ai, só teria de alterar a condição na função convert para:

function convert() {
  const binary = document.getElementById('b-input').value;
  if (/^[01]+$/.test(binary) === 0) return alert("Please, enter a binary number");
}

Edit: Tal como mencionado por hkotsubo, a comparação deve ser feita para verificar se o valor é true ou false, e não compará-lo a '0'. Assim, deverá tentar:

if (! /^[01]+$/.test(binary)) return alert("Please, enter a binary number");

Outra forma mais trabalhosa mas tb simples de entender, é fazer um loop que verifique se cada caracter da string inserida é "0" ou "1". Normalmente, nesse tipo de verificações prefiro que o valor retornado seja true ou false, então alterei também a função para esse fim.

function check_str(str){
  for (var i=0; i<str.length; i++){
    if (str[i] !='0' || str.charAt[i] !='1'){
      return false;
    }
  }
  return true;
}


function convert() {
    const binary = document.getElementById('b-input').value;
    if (check_str(binary) === false) return alert("Please, enter a binary number");
}


document.getElementById('b-input').onkeypress = function(e) {
    if (e.code == 'Enter') {
        convert();
    } 
}

Para pesquisar mais sobre expressões regulares, pode tentar o seguinte link: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

2
  • Vale lembrar que o método test retorna true ou false, então em vez de comparar com zero, deveria ser apenas if (! /^[01]+$/.test(binary)) { não é binário } - inclusive, por isso a comparação estrita (===) neste caso sempre resulta em false (tanto true === 0 quanto false === 0 são falsos e portanto nunca entrará naquele if)
    – hkotsubo
    15/04/2021 às 20:15
  • Oops, verdade. Escrevi false na segunda opção (inclusive referi que prefiro usar true ou false) e esqueci da primeira solução. Obrigado por mencionar.
    – jcvts
    15/04/2021 às 22:00
5

Só para acrescentar mais uma alternativa, também consegue fazer com funções de JS puras de forma minimamente direta. Pode transformar em array com split, filtrar por 0's e 1's com filter e verificar se o tamanho coincide com a entrada:

function isBinary(val){
  return val.split('').filter(x => x == "0" || x == "1").length == val.length;
}

Veja o exemplo a funcionar:

function isBinary(val){
  return val.split('').filter(x => x == "0" || x == "1").length == val.length;
}

function convert() {
  const binary = document.getElementById('b-input').value;
  console.log(isBinary(binary));
}
<input type="text" id="b-input" onkeyup="convert()">

Não quero com isto dizer que esta solução é melhor que as restantes já existentes, mas é mais uma forma de solucionar o problema.

2
  • Eu acho mais óbvio filtrar por x => x != "0" && x != "1" e depois verificar se o tamanho é 0. São soluções equivalentes, mas para mim é mais direta ao ponto de verificar se é inválido 3/05/2021 às 14:19
  • 1
    @JeffersonQuesado Esse é o inverso da lógica que utilizei, mas como o nome da função está na afirmativa isBinary optei por construir a lógica na positiva. Mas é uma boa critica.
    – Isac
    3/05/2021 às 21:26
2

Pode usar o parseInt. Ele retornará NaN se o input não for válido.

window.document.querySelector('input#b-input').addEventListener("input", function(e) {
    if (isNaN(parseInt(e.data, 2))) {
        alert("Please, enter a binary number");
        e.target.value = "";
        return 
     }
});
<input type="text" id="b-input">

1

Oi, você pode usar o REGEX para validar:

function useRegex(input) {
    let regex = /^[0-1]+$/i;
    return regex.test(input);
}

você pode validar os seus testes por esses sites a seguir:

https://regexr.com/

https://regex-generator.olafneumann.org/

e uma explicação mais a dentro do conteúdo:

https://medium.com/@alexandreservian/regex-um-guia-pratico-para-express%C3%B5es-regulares-1ac5fa4dd39f

1

Você disse que quer "converter binários em decimal" (e a menos que seja para fins de aprendizado, eu usaria parseInt, que embora mais direto, tem alguns detalhes a considerar - detalhados mais abaixo).

Enfim, uma forma seria de fato verificar se a string tem somente zeros e uns, como uma das respostas indicou.

Se bem que, se a ideia é converter de binário para decimal, eu já faria a validação durante a conversão:

var result = document.querySelector('#result');
window.document.querySelector('input#b-input').addEventListener("input", function(e) {
    var decimal = 0;
    var s = e.target.value;
    for (var i = 0; i < s.length; i++) {
        var digito = parseInt(s[i]);
        if (digito == 1) {
            decimal += Math.pow(2, s.length - i - 1);
        } else if (digito != 0) { // se for NaN também cai aqui
            decimal = NaN;
            break; // não é zero nem 1, posso interromper o loop
        }
    }
    if (isNaN(decimal)) {
        result.innerText = 'Não foi digitado um número binário';
    } else {
        result.innerText = `${s} em decimal=${decimal}`;
    }
});
<form>
  <input type="text" id="b-input">
</form>
<p id='result'></p>

Ou seja, se durante a conversão eu encontrar algo que não seja zero nem um, dá erro. Caso contrário, ele continua convertendo.

Se você fizer primeiro a validação e depois a conversão também funciona, claro, mas aí teria que percorrer a string duas vezes, o que me parece desnecessário.


Outra resposta sugeriu usar parseInt, que é uma alternativa mais direta (e como eu já disse, é o que eu recomendaria, a menos que seu projeto seja para fins de aprendizado).

Mas tem um detalhe, pois parseInt não aceita apenas zeros e uns, veja:

for (var s of ['-01', '   10', '10xyz'])
    console.log(`${s} = ${parseInt(s, 2)}`);

Veja que também são aceitos o caractere - (para indicar que o número é negativo), e espaços no início são ignorados, assim como qualquer coisa depois dos dígitos (por isso na string 10xyz, tudo depois do x é ignorado). Este comportamento é descrito na documentação.

Portanto, você tem que decidir o que vai querer: somente uma string contendo zeros e uns, ou qualquer string que possa ser convertida de binário para decimal (segundo as regras do JavaScript, por exemplo)? Se tiver espaços, vai ignorar ou dar erro? Etc...

Vale lembrar que números negativos, como já visto acima, devem ser representados com o sinal de menos na frente. Mas também existe a possibilidade de representar tais números usando o complemento de dois (mas aí creio já fugir um pouco do escopo da pergunta, mas de qualquer forma é algo a se considerar, caso vá implementar o algoritmo em vez de usar o que já tem pronto).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .