Solucionado
A contagem de palavras do meu projeto está dando um erro. Quando uso o split passando como parâmetro o espaço: .split(' '); ele contabiliza, porém, interpreta uma quebra de linha no html (nota: essa quebra de linha não é visual, apenas na IDE) como 7 espaços.
Gostaria de saber como resolver
Oi Raoni tudo bem?
Poderia compartilhar a pasta do seu projeto no github por gentileza. Assim podemos analisar melhor o que está acontecendo.
Como o código é bem pequeno vou colocar por aqui...
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Typer JQuery</title>
</head>
<body>
<h1 class="title">Typer JQuery</h1>
<p class="frase">teste feito com 5 palavras</p>
<ul>
<li> <span id="words-amount">X</span> palavras</li>
<li>10 segundos</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>var frase = $(".frase").text();
var wordsLength = frase.split(' ').length;
var wordsAmount = $("#words-amount");
wordsAmount.text(wordsLength);No meu computador falou que tem 5 palavras.
Esse é seu código, só coloquei as referências mas tá igual. Veja se executando esse em um novo arquivo .html no Google Chrome última versão dá erro.
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Typer JQuery</title>
</head>
<body>
<h1 class="title">Typer JQuery</h1>
<p class="frase">teste feito com 5 palavras</p>
<ul>
<li> <span id="words-amount">X</span> palavras</li>
<li>10 segundos</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
var frase = $(".frase").text();
var wordsLength = frase.split(' ').length;
var wordsAmount = $("#words-amount");
wordsAmount.text(wordsLength);
</script>
</body>
</html>Ele funciona, porém quando há palavras suficientes para quebrar a linha no parágrafo (new line), ele computa essa quebra como 7 espaços
teste:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Typer JQuery</title>
</head>
<body>
<h1 class="title">Typer JQuery</h1>
<p class="frase">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe placeat ipsa exercitationem, aut
deleniti accusantium blanditiis nisi illum ab, unde neque. Laborum minus ad eius ducimus, facilis atque
quibusdam dignissimos.</p>
<ul>
<li> <span id="words-amount">X</span> palavras</li>
<li>10 segundos</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>com esse teste ele retorna 44 palavras, porém, só existem 30 palavras no parágrafo.
o retorno do array no debug:
0: "Lorem" 1: "ipsum" 2: "dolor" 3: "sit" 4: "amet" 5: "consectetur" 6: "adipisicing" 7: "elit." 8: "Saepe" 9: "placeat" 10: "ipsa" 11: "exercitationem," 12: "aut↵" 13: "" 14: "" 15: "" 16: "" 17: "" 18: "" 19: "" 20: "deleniti" 21: "accusantium" 22: "blanditiis" 23: "nisi" 24: "illum" 25: "ab," 26: "unde" 27: "neque." 28: "Laborum" 29: "minus" 30: "ad" 31: "eius" 32: "ducimus," 33: "facilis" 34: "atque↵" 35: "" 36: "" 37: "" 38: "" 39: "" 40: "" 41: "" 42: "quibusdam" 43: "dignissimos."
Não costumo postar muito, sei que se realmente quisermos essa funcionalidade, não usaríamos split dessa maneira, mas fiquei curioso em como resolver...
alguém?
Desculpe a demora. Criei uma função que limpa caracteres invisíveis com exceção do espaço e tira excesso de espaço.
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Typer JQuery</title>
</head>
<body>
<h1 class="title">Typer JQuery</h1>
<p class="frase">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe placeat ipsa exercitationem, aut
deleniti accusantium blanditiis nisi illum ab, unde neque. Laborum minus ad eius ducimus, facilis atque
quibusdam dignissimos.</p>
<ul>
<li> <span id="words-amount">X</span> palavras</li>
<li>10 segundos</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script>
var frase = $(".frase").text();
var wordsLength = limpaCaracteresInvisiveisComExcecaoDoEspacoETiraExcecoDeEspaco(frase).split(' ').length;
var wordsAmount = $("#words-amount");
wordsAmount.text(wordsLength);
function limpaCaracteresInvisiveisComExcecaoDoEspacoETiraExcecoDeEspaco(string) {
novaString = "";
for (let k = 0; k < string.length; k++) {
let bool = false;
for (let n = 0; n < 32; n++) {
if (string[k].charCodeAt() == n) {
bool = true;
break;
}
}
if (!bool){
novaString=novaString+string[k];
}
}
return novaString.trim().replace(/\s{2,}/g, ' ');;
}
</script>
</body>
</html>Agradeço a atenção!
obrigado!
Disponha e bons estudos!!!