No artigo de hoje vamos ensinar a criar um contador de caracteres e de palavras, muito útil para possíveis validações de formulário, etc... em JavaScript.

Bem, vamos começar criando nosso arquivo index, como não iremos mexer com sistemas de Banco de Dados podemos usar a extensão (.html) ou (.php), fica a sua escolha, contanto que não esqueça que se for (.php), o arquivo tem de estar dentro da pasta WampServer.

O arquivo HTML ficará assim:

 <form id="formulario" method="post" action=""> <fieldset> <legend>Contador de Caracteres</legend> <br/> <br/> <label>Digite:</label> <input onkeyup="contarCaracter(this.value)" class ="meuform" type="text" id="nome" size="53" tabindex="1" /><br/><br/><br/> <center> <div id="quantidadeform"> <input value="0 Caracter" type="text" id="quantidade" size="33" /> </div> </center> </fieldset> </form> <br/><br/> <form id="formulario" method="post" action=""> <fieldset> <legend>Contador de Palavras</legend> <br/> <br/> <label>Digite:</label> <input onkeyup="contarpalavra(this.value)" class ="meuform" type="text" id="nome2" size="53" tabindex="1" /><br/><br/><br/> <center> <div id="quantidadeform"> <input value="0 Palavras" type="text" id="quantidade2" size="33" /> </div> </center> </fieldset> </form>

Foram criados dois formulários, um para contar os caracteres digitados pelo usuário, e outro formulário para contar as palavras digitadas.

Preste atenção que temos uma função onkeyup em JavaScript no input do primeiro form chamado onkeyup="contarCaracter(this.value)". Essa função onkeyup significa que, a cada tecla digitada (pressionada), será chamada essa função, sendo assim, ele irá contar cada tecla pressionada no input para fazer a contagem dos caracteres.

Nossa função contarCaracter ficará dessa forma: 

 function contarCaracter(valor){ var cont = valor.length; if(cont == 1 || cont == 0){ document.getElementById("quantidade").value = cont + " Caracter"; }else{ document.getElementById("quantidade").value = cont + " Caracteres"; } }

Essa função está fazendo nada mais, nada menos, que recebendo como parâmetro o valor digitado no input e através da função length na qual é utilizada para obter o comprimento de uma cadeia de caracteres. Ele pega o parâmetro, conta quantos caracteres possui essa variável e atribui o resultado em uma nova variável chamada cont (pode ser o nome que quiser, é apenas uma variável). Feito a contagem, ele verifica se é igual a 0 ou 1 para mostras a palavra caracter no singular, caso seja maior que um, ele mostrar a palavra caracter no plural.

Mas a forma que setamos o input com o valor é o mesmo, na qual definimos que onde conter o input com seletor ID(quantidade), irá receber o resultado da contagem do input de entrada que você digitou.

Simples não é???

------------------------------------------------------------------------------------------

Contador de palavras

Agora faremos o contador de palavras, na qual será usado do mesmo conceito, porém será feito a contagem por palavras e não por caracteres.

Nossa função ficará assim:

 function contarpalavra(valor){ valor.replace(/(\r\n|\n|\r)/g," ").trim(); var cont = valor.split(/\s+/g).length - 1; if(cont == "1" || cont == "0"){ document.getElementById("quantidade2").value = cont + " Palavra"; }else{ document.getElementById("quantidade2").value = cont + " Palavras"; } }

Como na outra função recebemos o valor do input como parâmetro, e logo após usamos uma função replace, na qual substituímos caracteres especiais como espaço e tecla enter por vazio e logo após damos um trim que retira esse espaço em branco, ou seja, para não ser contabilizados espaços em branco, por exemplo, em nossa contagem.

Depois usamos uma função Split, que nos permite dividir uma cadeia de caracteres (string) e retornar os resultados em uma tabela, graças a uma sequência definida como separador, no nosso caso, separamos a string a cada espaço “ “, e damos um -1 na contagem para não ser contabilizado o espaço que digitamos entre uma palavra e outra. Após isto, atribuímos a contagem da mesma forma verificando se é igual a 0 ou 1 para a palavra aparecer no singular e se maior que 1 a palavra aparece no plural.

Bem por hoje é isso, dúvidas, críticas ou sugestões comentem a abaixo.

Exemplo completo Aqui...

Bons estudos =)