JavaScript – Usando .length

Usando .length

A propriedade length retorna o número de unidade ou tamanho de código muito utilizado em Arrays e Strings,

Antes de iniciar coloque no final do seu código HTML a seguinte tag.

<script type="text/javascript">

// seu código 

</script>

Modo simples, descobrindo o valor de caracteres dentro da String.

JS

var caracteres = "Descobrindo"

document.getElementById("resultado1").innerHTML = caracteres.length;

HTML

<p id=" resultado1"></p>

Ativando por botão.

JS

 totalCaracteres = () =>{

 var texto = "Descobrindo a quantidade de caracteres deste texto .";
 document.getElementById("resultado2").innerHTML = "Este texto contém " +  texto.length;
}

HTML

<button onclick="totalCaracteres()">Try it</button>
<p id=" resultado2">0</p>

Pegando o valor da um Array, neste exemplo primeiro vamos pedir o total de Arrays e depois o total de caracteres de um dos Array.


JS

var meuArrey = ["Primerio","segundo"];

document.getElementById("total-array ").innerHTML = "total de nome no array " + meuArrey.length;
document.getElementById("total- caracteres ").innerHTML = "total caracteres no Primerio " + meuArrey[0].length;

HTML

<p id="total-array"></p>
<p id="total- caracteres"></p>

Total de caracteres escrito dentro do campo <input>.


JS

var input = document.getElementById('escrever'); 
var contar = document.getElementById('valor');

input.onkeyup = function teste() {
 contar.innerHTML = input.value.length;
}

HTML

<input id="escrever" ><span id="valor">0</span>

Neste exemplo está sendo usado o length para saber se o valor é maior ou menor estabelecido na função, e então retornar um texto referente ao parâmetro.

JS

var area = document.getElementById('areTexto'); 
var aviso = document.getElementById('aviso');

area.onkeyup = function teste2() {
 
 if(area.value.length > 10)
 {
  document.getElementById("aviso").innerHTML = "Grande de mais" ;
 }
 else
 {
  document.getElementById("aviso").innerHTML = "certo" ;
 }
 if(area.value.length <= 2)
 {
  document.getElementById("aviso").innerHTML = "Escreva mais" ;
 }

}

HTML

<textarea id="areTexto"></textarea>

<span id="aviso"></span>

Neste caso o valor está sendo buscado dentro de um parágrafo especifico, não mais dentro da String.

JS

var valor = 0;
var paragrafo = document.getElementsByClassName("texto");
for (var i = 0; i < paragrafo.length; i++) {
    var texto = paragrafo[i].textContent && paragrafo[i].innerHTML;
    var valorFinal = texto.length;
    
    document.getElementById("resultado3").innerHTML = valorFinal;
}

HTML

<p class="texto">Lorem Ipsum</p>

<span id=" resultado3">0</span>

Esses foram exemplos simples sobre o uso do length, continue estudando e buscando códigos cada vez maiores onde o length esta presente como em slidshow.