چگونه یک ابزار شمارش کلمات بلادرنگ با HTML، CSS و جاوا اسکریپت بسازیم

چه در حال نوشتن یک مقاله، یک توییت یا یک پست وبلاگ باشید، پیگیری تعداد کلمات و کاراکترها بسیار مهم است. در این آموزش، شما یک شمارنده کلمات کاملاً کاربردی و بلادرنگ برای

چه در حال نوشتن یک مقاله، یک توییت یا یک پست وبلاگ باشید، پیگیری تعداد کلمات و کاراکترها بسیار مهم است.

در این آموزش، شما یک ابزار شمارشگر کلمات کاملاً کاربردی و بلادرنگ را از ابتدا می‌سازید. شما از HTML برای ساختار، از CSS برای طراحی تمیز و از جاوا اسکریپت خالص (Vanilla JavaScript) برای مدیریت منطق شمارش استفاده خواهید کرد.

از آنجایی که این ابزار به طور کامل در مرورگر اجرا می‌شود، به محض تایپ کردن کار می‌کند و داده‌های متنی شما را کاملاً خصوصی نگه می‌دارد.

بیایید شروع کنیم.

پیش‌نیازها

برای دنبال کردن راحت این راهنما، شما باید موارد زیر را داشته باشید:

• درک پایه‌ای از تگ‌های HTML و استایل‌دهی CSS.
• آشنایی با مفاهیم جاوا اسکریپت مانند توابع، شنوندگان رویداد (Event Listeners) و عبارات باقاعده پایه (Regex).
• یک ویرایشگر کد (مانند VS Code) و یک مرورگر وب.

فهرست مطالب

• مرحله ۱: راه‌اندازی پروژه
• مرحله ۲: ساختار HTML درک HTML:
• درک HTML:
• مرحله ۳: استایل‌دهی ابزار با CSS درک CSS:
• درک CSS:
• مرحله ۴: افزودن منطق جاوا اسکریپت درک جاوا اسکریپت:
• درک جاوا اسکریپت:
• مرحله ۵: تست برنامه

مرحله ۱: راه‌اندازی پروژه

ابتدا باید فضای کاری خود را تنظیم کنید. یک پوشه جدید روی رایانه خود ایجاد کنید و نام آن را word-counter-app بگذارید.

در داخل این پوشه، سه فایل خالی ایجاد کنید:

• index.html
• style.css
• script.js

مرحله ۲: ساختار HTML

فایل index.html خود را باز کنید. شما باید قالبی ایجاد کنید که شامل یک هدر، یک شبکه (Grid) برای نمایش آمار بلادرنگ، یک ناحیه متنی (Textarea) برای تایپ کاربر، و دکمه‌هایی برای کپی یا پاک کردن متن باشد.

کد زیر را در فایل HTML خود قرار دهید:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Counter Tool</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header-section">
        <h1>Word Counter</h1>
        <p class="description">Paste or type your text below to get a real-time count of words, characters, sentences, and paragraphs.</p>
    </header>

    <main class="tool-container">
        
        <!-- Statistics Panel -->
        <div class="stats-grid">
            <div class="stat-box">
                <div class="stat-value" id="wordCount">0</div>
                <div class="stat-label">Words</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="charCount">0</div>
                <div class="stat-label">Characters</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="sentenceCount">0</div>
                <div class="stat-label">Sentences</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="paragraphCount">0</div>
                <div class="stat-label">Paragraphs</div>
            </div>
        </div>

        <!-- User Input Area -->
        <textarea id="textInput" placeholder="Start typing or paste your text here..."></textarea>

        <!-- Action Buttons -->
        <div class="controls">
            <button class="btn-primary" onclick="copyText()" id="copyBtn">Copy Text</button>
            <button class="btn-secondary" onclick="clearText()">Clear</button>
        </div>

    </main>

    <script src="script.js"></script>
</body>
</html>

  

درک HTML:

• کلاس .stats-grid: این بخش شامل چهار کادر مجزا برای نمایش شمارش‌ها است. هر عدد دارای یک id یکتا (مانند wordCount) است تا جاوا اسکریپت بتواند به راحتی آن را پیدا کرده و به‌روزرسانی کند.
• تگ <textarea>: این کادر ورودی اصلی است که کاربران محتوای خود را در آن تایپ یا جای‌گذاری (Paste) می‌کنند.
• تگ <script>: این تگ HTML شما را به منطقی که در مراحل بعدی خواهید نوشت متصل می‌کند.

مرحله ۳: استایل‌دهی ابزار با CSS

در ادامه، به ابزار خود ظاهری مدرن و حرفه‌ای می‌بخشید. شما از CSS Grid برای تراز کردن دقیق کادرهای آماری استفاده خواهید کرد.

فایل style.css خود را باز کرده و این کد را اضافه کنید:

    :root {
    --primary-color: #007bff;
    --bg-color: #f8f9fa;
    --text-dark: #202124;
    --text-muted: #5f6368;
    --border-color: #dadce0;
    --panel-bg: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    font-weight: 800;
}

p.description {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 1.1rem;
}

.tool-container {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-box {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Text Area */
textarea {
    width: 100%;
    height: 250px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Buttons */
.controls {
    display: flex;
    gap: 12px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-color);
}

  

درک CSS:

• سی‌اس‌اس گرید (CSS Grid): کلاس .stats-grid از دستور grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); استفاده می‌کند. این باعث می‌شود اگر کاربری ابزار را در صفحه نمایش کوچک موبایل مشاهده کند، چهار کادر آماری به طور خودکار و مرتب روی یکدیگر قرار گیرند.
• متغیرهای CSS: استفاده از :root در بالا به شما اجازه می‌دهد اگر بعداً خواستید رنگی غیر از آبی پیش‌فرض (#007bff) را به کار ببرید، به سرعت رنگ برند را تغییر دهید.

در این مرحله، طراحی بصری ابزار شما کامل شده است. این همان چیزی است که شمارنده نهایی کلمات در مرورگر شما به نظر خواهد رسید:

مرحله ۴: افزودن منطق جاوا اسکریپت

اکنون باید ابزاری بسازید که متن را بشمارد. شما از یک شنونده رویداد (event listener) استفاده خواهید کرد که هر ضربه روی کلید را زیر نظر دارد. هر بار که کاربر تایپ می‌کند، تعداد کلمات، کاراکترها، جملات و پاراگراف‌ها مجدداً محاسبه می‌شود.

فایل script.js خود را باز کرده و این کد را در آن قرار دهید:

    const textInput = document.getElementById('textInput');
const wordCountDisplay = document.getElementById('wordCount');
const charCountDisplay = document.getElementById('charCount');
const sentenceCountDisplay = document.getElementById('sentenceCount');
const paragraphCountDisplay = document.getElementById('paragraphCount');
const copyBtn = document.getElementById('copyBtn');

// 1. Listen for user input in real-time
textInput.addEventListener('input', updateStatistics);

// 2. The Core Counting Logic
function updateStatistics() {
    const text = textInput.value;

    // Character Count (includes spaces)
    charCountDisplay.textContent = text.length;

    // Word Count
    const words = text.match(/\S+/g) || [];
    wordCountDisplay.textContent = words.length;

    // Sentence Count
    const sentences = text.split(/[.!?]+(?=\s|$)/).filter(sentence => sentence.trim().length > 0);
    sentenceCountDisplay.textContent = sentences.length;

    // Paragraph Count
    const paragraphs = text.split(/\n+/).filter(paragraph => paragraph.trim().length > 0);
    paragraphCountDisplay.textContent = paragraphs.length;
}

// 3. Copy functionality
function copyText() {
    if (!textInput.value) return;
    
    textInput.select();
    document.execCommand('copy');
    
    // Provide visual feedback
    copyBtn.textContent = 'Copied!';
    setTimeout(() => {
        copyBtn.textContent = 'Copy Text';
    }, 1500);
}

// 4. Clear functionality
function clearText() {
    textInput.value = '';
    updateStatistics(); // Reset counts to zero
}

  

آشنایی با کدهای جاوا اسکریپت:

• رویداد input: عبارت textInput.addEventListener('input', ...) راز به‌روزرسانی‌های بلادرنگ است. این رویداد دقیقاً در لحظه‌ای که کلیدی فشرده می‌شود یا متنی جای‌گذاری (Paste) می‌گردد، تابع شمارش را فعال می‌کند.
• شمارش کلمات: عبارت text.match(/\S+/g) یک عبارت باقاعده (Regular Expression) است که به دنبال رشته‌های متوالی از کاراکترهای غیرفاصله می‌گردد. این روش بسیار دقیق‌تر از صرفاً تقسیم کردن متن بر اساس فاصله‌ها است، زیرا فضاهای خالی اضافی که به اشتباه ایجاد شده‌اند را نادیده می‌گیرد.
• شمارش جملات: منطق .split(/[.!?]+(?=\s|$)/) هر بار که به نقطه، علامت تعجب یا علامت سوالی که پس از آن فاصله آمده باشد برخورد کند، متن را به قطعاتی تقسیم می‌کند.

مرحله ۵: تست کردن برنامه

کدنویسی شما کاملاً به پایان رسیده است! اکنون زمان آن است که بررسی کنید آیا منطق برنامه شما به درست کار می‌کند یا خیر.

• پوشه word-counter-app خود را باز کنید.
• فایل index.html را دو بار کلیک کنید تا در مرورگر وب شما باز شود.
• چند جمله در ناحیه متنی تایپ کنید. تماشا کنید که اعداد در بالا بلافاصله به‌روز می‌شوند.
• تلاش کنید فاصله‌های دوتایی اضافه کنید یا کلید "Enter" را فشار دهید تا پاراگراف‌های جدیدی ایجاد شود، و مطمئن شوید که منطق برنامه آن‌ها را به دقت می‌شمارد.
• برای آزمایش ویژگی کلیپ‌بورد، روی «کپی متن» و برای پاکسازی صفحه روی «پاک کردن» کلیک کنید.

با به پایان رساندن این پروژه، شما یک ابزار کاربردی سریع و سمت کاربر (client-side) با استفاده از جاوا اسکریپت خالص (vanilla JavaScript) ساخته‌اید. شما نحوه دستکاری رشته‌ها، استفاده از عبارات باقاعده برای تحلیل متن، و ایجاد شبکه‌های رابط کاربری واکنش‌گرا را آموختید.

اگر می‌خواهید این پایگاه کد دقیق را در یک محیط تولیدی واقعی در حال اجرا ببینید، می‌توانید این شمارنده آنلاین کلمات را امتحان کنید. به ساختن ادامه دهید و از کدنویسی لذت ببرید!