Contador de palavras JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como construir um aplicativo Word Counter usando Vanilla JavaScript.

Aqui está o aplicativo Word Counter que você irá construir.

Crie a estrutura do projeto

Primeiro, crie a pasta do projeto chamada word-counter.

Em segundo lugar, no word-counterprojeto, crie as pastas csse js, que armazenarão os arquivos CSS e JavaScript de acordo.

Terceiro, crie um style.cssarquivo dentro da csspasta e dois arquivos JavaScript chamados word-counter.jse app.jsdentro da jspasta.

Por fim, crie o index.htmlarquivo na pasta raiz do projeto.

A estrutura final da pasta do projeto ficará assim:

Crie o arquivo HTML

Primeiro, edite o index.htmlarquivo e coloque os arquivos CSS e JavaScript no index.htmlarquivo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Word Counter</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
    <script src="js/word-counter.js"></script>
    <script src="js/app.js"></script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

O aplicativo WordCounter terá um <textarea>elemento simples. Quando você insere algum texto, ele mostra o número de caracteres e palavras que você digitou.

Para fazer isso, você precisará ter <textarea>os seguintes <div>elementos:

O <textarea>elemento permitirá que você insira texto.
E o <div>elemento mostrará o número de caracteres e palavras inseridos no <textarea>elemento.

Por padrão, o <div>elemento deve mostrar 0 caracteres e 0 palavras.

Segundo, adicione os elementos <textarea>e <div>ao index.htmlarquivo após a <body>tag de abertura e antes da primeira <script>tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Word Counter</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
<h1>Word Counter</h1>
    <label for="text">Enter some text below:</label>
    <textarea id="text" rows="10" cols="60"></textarea>
    <div id="stat">You've written 0 words and 0 characters.</div>
    <script src="js/word-counter.js"></script>
    <script src="js/app.js"></script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Crie a classe WordCounter

Primeiro, você criará a WordCounterclasse no word-counter.jsarquivo:

class WordCounter {
}Linguagem de código:  JavaScript  ( javascript )

A WordCounterclasse aceitará um <textarea>elemento. Ele ouvirá o inputevento do <textarea>elemento e calculará a quantidade de caracteres e palavras que o <textarea>elemento possui.

Em segundo lugar, adicione o constructorà WordCounterclasse. O constructoraceitará um <textarea>elemento.

Dentro do constructor, você inicializará a inputTextpropriedade da classe no inputTextargumento e anexará o inputouvinte de evento ao inputTextelemento:

class WordCounter {
    constructor(inputText) {
        this.inputText = inputText;
        this.inputText.addEventListener('input', this.count);
    }
    count(){
    }
}Linguagem de código:  JavaScript  ( javascript )

O this.count()método será executado sempre que o inputevento ocorrer. Voltaremos para implementar a lógica do count()método mais tarde.

Terceiro, adicione um novo método à WordCounterclasse, que calcula o número de caracteres e palavras:

class WordCounter {
    constructor(inputText) {
        this.inputText = inputText;
        this.inputText.addEventListener('input', this.count);
    }
    count(){
    }
    getWordStat(str) {
        let matches = str.match(/\S+/g);
        return {
            characters: str.length,
            words: matches ? matches.length : 0,
        };
    }
}Linguagem de código:  JavaScript  ( javascript )

O getWordStat()método usa uma expressão regular /\S/g para retornar as palavras numéricas de uma string. Ele também usa a lengthpropriedade string da string de entrada strpara obter o número de caracteres.

Terceiro, o count()método precisará chamar o getWordStat()para calcular o número de palavras e caracteres do inputTextelemento.

Para obter o texto do <textarea>elemento, você usa sua valuepropriedade:

...
count() {
   let wordStat = this.getWordStat(this.inputText.value.trim());
   // how to expose the wordStat to the outside
   // ..
}Linguagem de código:  JavaScript  ( javascript )

E o count()método também precisa comunicar com o exterior a quantidade de palavras e caracteres.

Para fazer isso, você tem duas opções: usar um callback e um evento personalizado . Usaremos um evento personalizado neste tutorial.

Se você quiser saber como usar um retorno de chamada, confira o tutorial do cronômetro de contagem regressiva .

Quarto, adicione um novo método chamado emitEventà WordCounterclasse:

emitEvent(wordStat) {
        // Create count event
        let countEvent = new CustomEvent('count', {
            bubbles: true,
            cancelable: true,
            detail: {
                wordStat
            }
        });
        // dispatch the count event
        this.inputText.dispatchEvent(countEvent);
}Linguagem de código:  JavaScript  ( javascript )

O emitEvent()método aceita um wordStatobjeto. Dentro do método, criamos um evento customizado para o inputTextelemento chamado countusando o CustomEventconstrutor e despachamos o countevento usando o dispatchEventmétodo.

Posteriormente, você anexará um ouvinte de evento ao countevento e acessará o wordStatobjeto usando a event.detail.wordStatsintaxe.

O emitEvent()deve ser chamado sempre que o inputevento ocorrer. Portanto, invocamos o emitEvent()interior do count()método:

count(){
   let wordStat = this.getWordStat(this.inputText.value.trim());
   this.emitEvent(wordStat);
}Linguagem de código:  JavaScript  ( javascript )

A WordCounterclasse ficará assim:

class WordCounter {
    constructor(inputText) {
        this.inputText = inputText;
        this.inputText.addEventListener('input', this.count);
    }
    count(){
        let wordStat = this.getWordStat(this.inputText.value.trim());
        this.emitEvent(wordStat);
    }

    emitEvent(wordStat) {
        // Create count event
        let countEvent = new CustomEvent('count', {
            bubbles: true,
            cancelable: true,
            detail: {
                wordStat
            }
        });
        // dispatch the count event
        this.inputText.dispatchEvent(countEvent);

    }
    getWordStat(str) {
        let matches = str.match(/\S+/g);
        return {
            characters: str.length,
            words: matches ? matches.length : 0,
        };
    }
}Linguagem de código:  JavaScript  ( javascript )

Adicionar lógica ao arquivo app.js

Primeiro, selecione o elemento <textarea>e <div>usando o querySelector() método:

const inputText = document.querySelector('#text');
const statElem = document.querySelector('#stat');
Linguagem de código:  JavaScript  ( javascript )

Segundo, crie uma nova instância da WordCounterclasse e passe o inputTextelemento para seu construtor:

new WordCounter(inputText);Linguagem de código:  JavaScript  ( javascript )

Terceiro, defina uma nova função chamada render()que atualize a contagem de palavras e caracteres do statElemelemento.

A render()função aceita um objeto de evento personalizado:

const render = (event) => {
    statElem.innerHTML = `<p>You've written <span class="highlight">${event.detail.wordStat.words} words</span> 
        and <span class="highlight">${event.detail.wordStat.characters} characters</span>.</p>`;
}
Linguagem de código:  HTML, XML  ( xml )

Quarto, adicione um ouvinte de evento ao countpar e execute o render()método sempre que o countevento ocorrer:

inputText.addEventListener('count', render);Linguagem de código:  JavaScript  ( javascript )

Será app.jsparecido com o seguinte:

const inputText = document.querySelector('#text');
const statElem = document.querySelector('#stat');

// create a new instance of WordCounter
new WordCounter(inputText);


const render = (event) => {
    statElem.innerHTML = `<p>You've written <span class="highlight">${event.detail.wordStat.words} words</span> 
        and <span class="highlight">${event.detail.wordStat.characters} characters</span>.</p>`;
}

inputText.addEventListener('count', render);Linguagem de código:  JavaScript  ( javascript )

Agora, se você abrir o index.htmlarquivo no navegador da web, verá o seguinte erro:

Uncaught TypeError: Cannot read property 'value' of undefined at HTMLTextAreaElement.countLinguagem de código:  HTML, XML  ( xml )

E o problema ocorreu no count()método da WordCounterclasse:

Está mostrando que this.inputTexté undefined. Portanto, acessar a valuepropriedade do this.inputTextcausa um erro.

Resolva este problema

Quando inputocorre um evento no inputTextelemento, o count()método é executado.

E o objeto que executa o count()método é o inputTextobjeto, não a instância da WordCounterclasse.

Isso significa que dentro do count()método, o thisvalor faz referência ao inputTextelemento, não ao WordCounterobjeto.

Para provar isso, você pode registrar o thisvalor dentro do count()método da seguinte maneira:

count() {
    console.log(this); 
}Linguagem de código:  JavaScript  ( javascript )

… e atualize index.htmlnovamente, você verá o <textarea>elemento no console toda vez que digitar algum texto no <textarea>:

<textarea id="text" rows="10" cols="60"></textarea>
Linguagem de código:  HTML, XML  ( xml )

Como o thisvalor dentro do count()método faz referência ao <textarea>elemento, ele não possui a inputTextpropriedade. E também não tem o emitEvent()método.

Para corrigir o problema, você precisa alterar o ouvinte de evento para uma função de seta como esta:

constructor(inputText) {
   this.inputText = inputText;
    this.inputText.addEventListener('input', () => {
        this.count();
    });
}Linguagem de código:  JavaScript  ( javascript )

Quando você usa a função de seta, o thisvalor faz referência ao objeto do bloco circundante que é WordCounterneste caso. Em outras palavras, você pode acessar todas as propriedades e métodos do WordCounter no count()método.

A aula final WordCounterficará assim:

class WordCounter {
    constructor(inputText) {
        this.inputText = inputText;
        this.inputText.addEventListener('input', () => {
            this.count();
        });
    }
    count() {
        let wordStat = this.getWordStat(this.inputText.value.trim());
        this.emitEvent(wordStat);
    }

    emitEvent(wordStat) {
        // Create count event
        let countEvent = new CustomEvent('count', {
            bubbles: true,
            cancelable: true,
            detail: {
                wordStat
            }
        });
        // dispatch the count event
        this.inputText.dispatchEvent(countEvent);

    }
    getWordStat(str) {
        let matches = str.match(/\S+/g);
        return {
            characters: str.length,
            words: matches ? matches.length : 0,
        };
    }
}Linguagem de código:  JavaScript  ( javascript )