Interpretação de espaços HTML | jQuery: domine a biblioteca mais popular do mercado parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Victor Santos

| 199.2k xp | 15 posts

Analista Sistema

Terminei o curso tudo certo, mas tava testando algumas coisas e estou com uma dúvida em relação a interpretação de espaços no HTML. Na parte do código onde está a frase a ser digitada pelo usuário, quando coloco assim como está no código abaixo funciona bem a checagem pra ver se está correto a digitação

        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Porém, eu uso o VS code e coloco pra identar o código automáticamente quando salvo, dai ele salva o código assim:

        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.</p>

Esse "espaços" entre a linha de cima para a debaixo é suficiente pra "quebrar" a checagem do que é digitado no campo de digitação, pois em determinado momento ele espera que a gente digite os espaços para assim a checagem dar como correta. Tentei mexer na função que faz a checagem, mas não consegui, talvez nem seja lá o problema. Função:

function inicializaMarcadores() {
    var frase = $(".frase").text();

    campo.on("input", function () {
        var digitado = campo.val();

        if (frase.startsWith(digitado)) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });
}

Então existe algo a se fazer para o HTML não interprertar esse espaço quando coloco parte do texto na linha de baixo? Espero não ter sido muito prolixo kkkkkk Obrigado

2 respostas

solução!

por Geovani Granieri

| 909.1k xp | 1038 posts

Instrutor

22/04/2020

Olá Victor, tudo bem com você?

Realmente o format on save do VSCode é muito bom mas as vezes pode dar esses probleminhas, para corrigir vamos utilizar uma forma mais programática para isso :)

Vamos criar uma expressão regular para pegar todos os espaços da palavra e substituir por apenas 1, ou seja, onde tem 1 iremos manter com 1, mas onde tiver 30 agora será apenas 1, para isso vamos ter uma mínima mudança em nossa função:

var frase = $(".frase").text().replace(/\s+/g, " ");

Ou seja após pegar o valor do texto que está em nosso html iremos fazer uma troca (replace):

o / /g indica que eu quero fazer essa troca sempre que encontrarmos esse padrão
O padrão é o que esta dentro, no caso: \s+ que significa "um espaço ou mais"

Dessa forma temos o texto "cru" sem as quebras que o VSCode gera :)

Conseguiu Compreender? Qualquer coisa estou a disposição :)

Caso não entenda muito de expressões regulares, temos um curso incrível aqui na Alura: Curso Regex

Abraços e Bons Estudos!

por Victor Santos

| 199.2k xp | 15 posts

Analista Sistema

22/04/2020

Cara deu certo! Imaginei que seria algo a ser resolvido com Regex mesmo, inclusive antes havia tentei algo mas sem sucesso, depois eu vi que na que inicializa os contadores ele faz mas para os contadores

function inicializaContadores() {
    campo.on("input", function () {
        var conteudo = campo.val();

        var qtdPalavras = conteudo.split(/\S+/).length - 1; 
        $("#contador-palavras").text(qtdPalavras);

       ** var conteudoSemEspacos = conteudo.replace(/\s+/g, ''); **
        var qtdCaracteres = conteudoSemEspacos.length;
        $("#contador-caracteres").text(qtdCaracteres);
    });
}

Mas de qualquer forma muito obrigado, pode deixar que fazer esse curso de expressão regular, porque pelo que vi é muito importante.