chars.html

---
title: Textarea Counter Web Page
---

<h1>Character Counter</h1>
<p>This web page allows you to type in a textarea and will dynamically count and display the number of characters,
    words, and lines you've entered.</p>

<textarea id="inputText" oninput="countText()"
    style="width: 800px; height: 500px;">Input some text to count the number of words and characters</textarea>

<div>Characters: <span id="charCount">0</span></div>
<div>Words: <span id="wordCount">0</span></div>
<div>Sentences: <span id="sentenceCount">0</span></div>

<h2>Code</h2>
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2FkrMaynard%2FkrMaynard.github.io%2Fblob%2F483abb1a9e476b9c272c359e98ce2b442de6577b%2Fchars.html%23L18-L33&style=github&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on"></script>


<script>
    function countText() {
        const text = document.getElementById('inputText').value;

        // Count characters
        const charCount = text.length;

        // Count words by splitting the string on spaces or newline
        const wordCount = text.split(/\s+/).filter(Boolean).length;

        // Count sentences by splitting the string on period, exclamation mark, or question mark
        const sentenceCount = text.split(/[.!?;]+/).filter(Boolean).length;

        document.getElementById('charCount').textContent = charCount;
        document.getElementById('wordCount').textContent = wordCount;
        document.getElementById('sentenceCount').textContent = sentenceCount;
    }
 
</script>