Começo relembrando que todo nosso código desses projetos da quarentena estão neste repositório aqui:
GitHub - ThiagoDiasV/QuarantineDaysOfCode: Repositório com os projetos do QuarantineDaysOfCode para a Bastter.com e este que estamos desenvolvendo é este aqui:
QuarantineDaysOfCode/char-words-counter at master · ThiagoDiasV/QuarantineDaysOfCode · GitHubOntem começamos a adicionar o código JavaScript à nossa ferramenta de contagem. Até o momento conseguimos contar quantos caracteres com espaço são digitados por nosso usuário.
O código JavaScript até o momento está assim:
O HTML vocês podem conferir aqui:
QuarantineDaysOfCode/index.html at master · ThiagoDiasV/QuarantineDaysOfCode · GitHubAinda vou fazer umas pequenas mudanças de estilo no HTML mas hoje quero adicionar pelo menos mais duas features, a de contagem retirando os espaços e a de contagem de linhas. A de palavras é mais complicada, vai ficar por último.
Ontem vimos como resgatar o que o usuário digitou capturando o textarea por ID usando a função getElementById e resgatando o "value" desse elemento.
Vimos também como cortar os espaços excedentes usando a função trim:
Esqueçam esses undefined. Não interessam por enquanto.
E foi assim que conseguimos contar quantos caracteres o usuário digitou contando com os espaços internos e cortando os externos à esquerda e à direita.
Agora precisamos contar quantos caracteres foram digitados mas somente os caracteres, sem espaço.
Para isso vou usar a função split.
A função split "quebra" uma string em partes, dependendo de um "ponto de corte" que eu defino como argumento da função.
Por exemplo:
Observem como eu consegui separar minha string em um array de strings, usando como separador a vírgula.
Ou seja, a função split retorna pra mim um array de elementos separados por um ponto de corte que eu defino passando o argumento, que no caso foi uma vírgula.
Acho que tá dando pra pensar onde eu quero chegar.
Em vez de usar o separador a vírgula, vou usar como separador o espaço:
Tá, eu consegui separar a frase por espaços, mas eu quero contar quantos caracteres tem nessa fase retirando os espaços.
O que eu devo fazer?
Bem, eu devo juntar as palavras novamente, mas dessa vez sem os espaços.
Podemos juntar elementos em um array usando a função join:
Notem que a função join recebe como argumento o que eu quero usar para juntar os elementos do array.
No primeiro caso, se eu usar uma string vazia, meu array tem seus elementos todos colados e temos uma string que representa o que era nossa frase mas sem espaços. Tudo que estávamos procurando, não é mesmo?
Abaixo, temos exemplos usando outras strings como argumento da função join, como hífen ou até 4 interrogações.
Acho que já temos uma resposta para a segunda feature do nosso site, né?
Vou capturar o texto recebido, o que o usuário digitou, e fazer essa quebra da string onde há espaços (já tendo passado a string pela função trim) e o array resultante eu vou juntar todos os elementos usando a função join passando como argumento uma string vazia. Por fim vou calcular o length dessa string resultante.
Nosso código vai ficar assim:
Agora, ao digitar no meu site teremos a contagem de caracteres somando os espaços internos e sem os espaços internos:
Já matamos dois problemas. Faltam dois.
A contagem de linhas é mais fácil do que a contagem de palavras, então vamos agora para ela. A de palavras vai ficar pra amanhã.
Bem, em um texto "cru", uma quebra de linha é representada pela contrabarra seguida da letra "n":
Se antes quebramos nosso texto em espaços, agora vamos quebrá-lo em quebras de linha, ou \ n.
Vamos dar um console.log no nosso texto sendo quebrado em quebra de linhas:
O resultado é o seguinte, ao digitarmos em nossa caixa de texto:
Já dei a resposta pra vocês como faremos para contar as linhas rs.
Vejam que o split usando a string que representa quebra de linhas nos retorna arrays separando o texto exatamente onde quebramos nossas linhas.
Basta pegar o length desse array que teremos a contagem de linhas de nosso texto.
Vamos adicionar o último comando do console acima em nosso main.js:
Rodando nosso código em nosso site agora, o que nós teremos é uma contagem correta de, até o momento, caracteres com e sem espaço e linhas:
Falta contar palavras, mas pra isso vou precisar falar um pouquinho de expressões regulares. Pro tópico não terminar muito denso, adiamos essa última feature para amanhã.
