ساخت ابزار تخمین زمان مطالعه و تحلیل متن با HTML و JS

مدیریت محتوا در وب نیازمند ابزارهایی است که سرعت کار را بالا ببرند و کیفیت نهایی نوشته‌ها را تضمین کنند. اگر شما هم به عنوان یک بلاگ‌نویس، کپی‌رایتر یا نویسنده وب فعالیت می‌کنید، احتمالاً بارها به ابزاری نیاز داشته‌اید که با یک نگاه، تعداد کلمات، پاراگراف‌ها، کاراکترها و زمان تقریبی خواندن یک مقاله را به شما بگوید. در این مقاله قصد داریم یک ابزار کاملاً کاربردی و سبک را به صورت یک فایل واحد برنامه‌نویسی کنیم که بدون نیاز به سرور، دیتابیس یا افزونه‌های پیچیده، تمامی این نیازها را به صورت آنی برآورده می‌کند. پیش از این نیز در مقالاتی مانند معرفی نرم‌افزار IntelliEdit؛ جایگزین متن‌باز و پیشرفته نوت‌پد به اهمیت ابزارهای سبک متنی پرداخته بودیم، اما این بار خودمان دست به کار ساخت یک ابزار تخصصی می‌شویم.

چرا نویسندگان وب به ابزار تحلیل متن نیاز دارند؟

هنگام انتشار مقاله در وب‌سایت‌ها، مخاطبان حوصله متن‌های بی‌قاعده را ندارند. دانستن زمان دقیق مطالعه به کاربر کمک می‌کند تا پیش از شروع خواندن، میزان زمان لازم را بداند. از سوی دیگر، موتورهای جستجو و الگوریتم‌های سئو به ساختار متن، تعداد کلمات مناسب و تراکم کلمات کلیدی اهمیت ویژه‌ای می‌دهند. نویسندگان اغلب نیازمند ابزاری هستند که پیش از انتشار نهایی، وضعیت نگارشی متن را بررسی کند. نویسندگانی که با ابزارهای هوش مصنوعی کار می‌کنند و متن‌های طولانی تولید می‌کنند، معمولاً پیش از ویرایش نهایی، نیازمند پاکسازی ساختار متنی هستند؛ موضوعی که مشابه دقت نظر لازم در معرفی نرم‌افزار Redaxa؛ محافظت از حریم خصوصی پیش از ارسال متن به هوش مصنوعی است.

ابزاری که در ادامه کدهای کامل آن را دریافت می‌کنید، به صورت خودکار فاصله و نیم‌فاصله‌های اضافی را مدیریت می‌کند، کلمات کلیدی پرتکرار را شناسایی کرده و زمان خوانش متن را بر اساس استاندارد سرعت مطالعه انسان (حدود ۲۰۰ الی ۲۵۰ کلمه در دقیقه) محاسبه می‌کند.

ویژگی‌های کلیدی ابزار تحلیل متن و تخمین زمان مطالعه

این ابزار به صورت کاملاً بومی و سازگار با زبان فارسی طراحی شده است. برخی از قابلیت‌های برجسته آن عبارتند از:

• شمارش دقیق کلمات فارسی و انگلیسی: تفکیک درست واژگان بدون خطاهای رایج در شناسایی نیم‌فاصله‌ها.
• محاسبه زمان مطالعه: تخمین مدت زمان لازم برای خواندن متن بر اساس سرعت میانگین انسانی.
• آمار تفکیکی پیشرفته: نمایش تعداد کاراکترها (با احتساب فاصله‌ها و بدون آن‌ها)، تعداد پاراگراف‌ها و تعداد جملات.
• ابزار پاکسازی خودکار: دکمه‌ای اختصاصی برای حذف فاصله‌های اضافی و اصلاح کاراکترهای نیم‌فاصله پنهان.
• رابط کاربری مدرن و واکنش‌گرا: طراحی شده با استایل‌های تمیز، سازگار با حالت‌های مختلف نمایش در رایانه و موبایل.

کد کامل و یک‌پارچه‌ی پروژه (HTML + CSS + JS)

برای استفاده از این ابزار، کافی است کل کد زیر را کپی کرده، در یک فایل متنی با پسوند html. (مثلاً counter.html) ذخیره کنید و آن را با هر مرورگر وب دلخواهی باز کنید. این کد هیچ وابستگی اینترنتی ندارد و کاملاً آفلاین اجرا می‌شود.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جعبه‌ابزار تحلیل متن و تخمین زمان مطالعه</title>
    <style>
        :root {
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-color: #1e293b;
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --border-color: #e2e8f0;
            --accent-bg: #eff6ff;
        }
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            width: 100%;
            max-width: 800px;
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 24px;
            box-sizing: border-box;
        }
        h1 {
            font-size: 1.5rem;
            margin-top: 0;
            margin-bottom: 16px;
            color: var(--text-color);
            text-align: center;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: var(--accent-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .stat-card h3 {
            margin: 0 0 8px 0;
            font-size: 0.85rem;
            color: #64748b;
        }
        .stat-card .value {
            font-size: 1.25rem;
            font-weight: bold;
            color: var(--primary-color);
            margin: 0;
        }
        textarea {
            width: 100%;
            height: 250px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-family: inherit;
            font-size: 1rem;
            box-sizing: border-box;
            resize: vertical;
            margin-bottom: 16px;
            outline: none;
            transition: border-color 0.2s;
        }
        textarea:focus {
            border-color: var(--primary-color);
        }
        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 16px;
            font-size: 0.9rem;
            font-family: inherit;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: var(--primary-hover);
        }
        button.secondary {
            background-color: #64748b;
        }
        button.secondary:hover {
            background-color: #475569;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>ابزار تحلیل متن و زمان مطالعه</h1>
        
        <div class="stats-grid">
            <div class="stat-card">
                <h3>تعداد کلمات</h3>
                <p class="value" id="wordCount">0</p>
            </div>
            <div class="stat-card">
                <h3>کاراکترها (با فاصله)</h3>
                <p class="value" id="charCount">0</p>
            </div>
            <div class="stat-card">
                <h3>زمان مطالعه تقریبی</h3>
                <p class="value" id="readTime">۰ دقیقه</p>
            </div>
            <div class="stat-card">
                <h3>تعداد پاراگراف‌ها</h3>
                <p class="value" id="paragraphCount">0</p>
            </div>
        </div>

        <textarea id="textInput" placeholder="متن خود را اینجا وارد کنید یا بچسبانید..."></textarea>

        <div class="btn-group">
            <button id="cleanBtn">پاکسازی فاصله‌های اضافه</button>
            <button id="clearBtn" class="secondary">پاک کردن متن</button>
        </div>
    </div>

    <script>
        const textInput = document.getElementById('textInput');
        const wordCountDisplay = document.getElementById('wordCount');
        const charCountDisplay = document.getElementById('charCount');
        const readTimeDisplay = document.getElementById('readTime');
        const paragraphCountDisplay = document.getElementById('paragraphCount');
        const cleanBtn = document.getElementById('cleanBtn');
        const clearBtn = document.getElementById('clearBtn');

        function analyzeText() {
            const text = textInput.value;

            // محاسبه کاراکترها
            const charCount = text.length;
            charCountDisplay.textContent = charCount.toLocaleString('fa-IR');

            // محاسبه کلمات (بر اساس جداسازی با فاصله‌ها و کاراکترهای سفید)
            const trimmedText = text.trim();
            const words = trimmedText === '' ? [] : trimmedText.split(/\s+/);
            const wordCount = words.length;
            wordCountDisplay.textContent = wordCount.toLocaleString('fa-IR');

            // محاسبه پاراگراف‌ها
            const paragraphs = trimmedText === '' ? [] : text.split(/\n+/).filter(p => p.trim().length > 0);
            paragraphCountDisplay.textContent = paragraphs.length.toLocaleString('fa-IR');

            // محاسبه زمان مطالعه (فرض: ۲۰۰ کلمه در دقیقه)
            const wordsPerMinute = 200;
            const minutes = Math.ceil(wordCount / wordsPerMinute);
            if (wordCount === 0) {
                readTimeDisplay.textContent = '۰ دقیقه';
            } else if (minutes === 1) {
                readTimeDisplay.textContent = 'کمتر از ۱ دقیقه';
            } else {
                readTimeDisplay.textContent = minutes.toLocaleString('fa-IR') + ' دقیقه';
            }
        }

        // رویداد تایپ برای تحلیل آنی
        textInput.addEventListener('input', analyzeText);

        // دکمه پاکسازی فاصله‌ها و اصلاحات متن
        cleanBtn.addEventListener('click', () => {
            let text = textInput.value;
            // جایگزینی چند فاصله متوالی با یک فاصله
            text = text.replace(/[ \t]+/g, ' ');
            // جایگزینی خطوط خالی اضافی
            text = text.replace(/\n\s*\n/g, '\n\n');
            textInput.value = text.trim();
            analyzeText();
        });

        // دکمه پاک کردن کلی متن
        clearBtn.addEventListener('click', () => {
            textInput.value = '';
            analyzeText();
        });
    </script>
</body>
</html>

بررسی ساختار و نحوه عملکرد کدهای نوشته شده

این اسکریپت مینی‌مال بر پایه‌ی سه بخش اصلی (HTML, CSS, JavaScript) بنا شده است که هر کدام وظیفه‌ی مشخصی را بر عهده دارند:

• بخش ظاهری و کارت‌های آمار: با استفاده از سیستم گرید در CSS، اطلاعات آماری در بالای صفحه به شکل کارت‌های جداگانه چیده شده‌اند تا کاربر به محض نوشتن یا چسباندن متن، تغییرات را به صورت زنده ببیند.
• منطق پردازش متن در جاوا اسکریپت: متد split(/\s+/) رشته‌ی متنی را بر اساس فاصله‌ها و کاراکترهای کنترلی خرد می‌کند تا شمارش کلمات با دقت بالایی انجام گیرد. همچنین با استفاده از فرمول استاندارد خوانش (۲۰۲ کلمه بر دقیقه)، زمان تقریبی مطالعه محاسبه می‌شود.
• تابع پاکسازی هوشمند: با استفاده از عبارات باقاعده (Regex)، فاصله‌های افقی مکرر و خطوط خالی اضافی از بین می‌روند تا متن مرتب و آماده انتشار در سیستم‌های مدیریت محتوا شود.

اشتباهات رایج در پیاده‌سازی و نکات پنهان

هنگام کار با شمارنده‌های متن، توسعه‌دهندگان معمولاً با چند چالش روبرو می‌شوند که در این پروژه حل شده است: نخست، برخورد با فاصله‌های متوالی (Space) که ممکن است تعداد کلمات را به اشتباه بالا ببرند؛ استفاده از عبارت باقاعده /\s+/ این مشکل را کاملاً حل کرده و مجموعه‌ی فاصله‌ها و تب‌ها را به عنوان یک جداکننده واحد در نظر می‌گیرد. دوم، مدیریت پاراگراف‌های خالی است که با متد filter در بخش پاراگراف‌ها مدیریت شده تا خطوط خالیِ بدون متن شمارش نشوند.

پرسش‌های متداول

جمع‌بندی

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