Text

<div class="panel-title">Counts</div>
          <div class="stats-grid">
            <div class="stat big"><div class="label">Words</div><div class="value" id="c-words">0</div></div>
            <div class="stat"><div class="label">Characters (w/ spaces)</div><div class="value" id="c-chars">0</div></div>
            <div class="stat"><div class="label">Characters (w/o)</div><div class="value" id="c-charsns">0</div></div>
            <div class="stat"><div class="label">Sentences</div><div class="value" id="c-sent">0</div></div>
            <div class="stat"><div class="label">Paragraphs</div><div class="value" id="c-para">0</div></div>
            <div class="stat"><div class="label">Lines</div><div class="value" id="c-lines">0</div></div>
            <div class="stat"><div class="label">Avg word length</div><div class="value" id="c-wlen">??/div></div>
            <div class="stat"><div class="label">Longest word</div><div class="value" id="c-longest" style="font-size:14px;">??/div></div>
          </div>
        </div>

<div class="panel">
          <div class="panel-title">Time Estimate</div>
          <div class="time-grid">
            <div class="stat"><div class="label">Reading</div><div class="value" id="t-read" style="font-size:18px;">0 min</div></div>
            <div class="stat"><div class="label">Speaking</div><div class="value" id="t-speak" style="font-size:18px;">0 min</div></div>
            <div class="stat"><div class="label">Handwriting</div><div class="value" id="t-hand" style="font-size:18px;">0 min</div></div>
            <div class="stat"><div class="label">Typing (40 WPM)</div><div class="value" id="t-type" style="font-size:18px;">0 min</div></div>
          </div>
          <div class="note">Reading 225 WPM 쨌 Speaking 150 WPM 쨌 Handwriting 20 WPM 쨌 Typing 40 WPM. Adjust mentally for technical or non-native text.</div>
        </div>

<div class="panel">
          <div class="panel-title">Keyword Density <div><button id="copy-table">Copy</button></div></div>
          <div class="field">
            <label>Filter</label>
            <select id="kw-filter">
              <option value="1">Single words</option>
              <option value="2">2-word phrases</option>
              <option value="3">3-word phrases</option>
            </select>
          </div>
          <div class="freq-table" id="freq-table"></div>
          <div class="note">Common stop words (the, a, of, ?? are excluded.</div>
        </div>
      </div>
    </div>

<section class="content">
      <h2>How Words and Characters Are Counted</h2>
      <ul>
        <li><strong>Words</strong> ??sequences of non-whitespace characters. URLs, numbers, and hyphenated compounds count as a single word.</li>
        <li><strong>Characters</strong> ??every Unicode code point including spaces and line breaks; the "w/o" version excludes whitespace.</li>
        <li><strong>Sentences</strong> ??split on <code>. ! ?</code> followed by whitespace or end of text. Abbreviations like "Dr." may inflate the count slightly.</li>
        <li><strong>Paragraphs</strong> ??blocks separated by one or more blank lines.</li>
      </ul>

<h2>Reading Speed Reference</h2>
      <ul>
        <li><strong>225 words per minute</strong> ??average adult silent reading.</li>
        <li><strong>150 wpm</strong> ??average comfortable speaking pace (slower for presentations, faster for casual speech).</li>
        <li><strong>20 wpm</strong> ??average handwriting speed.</li>
        <li><strong>40 wpm</strong> ??average typing speed; professional typists exceed 70 wpm.</li>
      </ul>

<h2>Keyword Density for SEO</h2>
      <p>Keyword density (a term's occurrences 첨 total words) was an explicit SEO signal in the 2000s. Modern search engines weight semantic relevance and topic coverage more than raw frequency, but density remains useful as a rough guide: 1??% for primary terms in long content is a common target, and unnaturally high densities (above 5%) read as keyword stuffing.</p>

<h2>Common Limits</h2>
      <ul>
        <li><strong>Twitter/X post</strong> ??280 characters</li>
        <li><strong>SMS</strong> ??160 characters (single segment)</li>
        <li><strong>Meta description</strong> ??~155 characters before truncation</li>
        <li><strong>SEO title</strong> ??~60 characters</li>
        <li><strong>College essay (Common App)</strong> ??650 words</li>
        <li><strong>Twitter bio</strong> ??160 characters</li>
      </ul>
    </section>
  </main>

const text = document.getElementById("text");
  function run() {
    const t = text.value;
    const trimmed = t.trim();
    const words = trimmed ? trimmed.split(/\s+/).filter(Boolean) : [];
    const chars = t.length;
    const charsNoSpace = t.replace(/\s/g, "").length;
    const sentences = trimmed ? trimmed.split(/[.!?]+\s+|[.!?]+$/).filter(s => s.trim()).length : 0;
    const paragraphs = trimmed ? trimmed.split(/\n\s*\n/).filter(p => p.trim()).length : 0;
    const lines = t === "" ? 0 : t.split(/\n/).length;
    const avgLen = words.length ? (words.reduce((s, w) => s + w.length, 0) / words.length) : 0;
    const longest = words.reduce((a, b) => a.length >= b.length ? a : b, "");

document.getElementById("c-words").textContent = words.length.toLocaleString();
    document.getElementById("c-chars").textContent = chars.toLocaleString();
    document.getElementById("c-charsns").textContent = charsNoSpace.toLocaleString();
    document.getElementById("c-sent").textContent = sentences.toLocaleString();
    document.getElementById("c-para").textContent = paragraphs.toLocaleString();
    document.getElementById("c-lines").textContent = lines.toLocaleString();
    document.getElementById("c-wlen").textContent = words.length ? avgLen.toFixed(1) : "??;
    document.getElementById("c-longest").textContent = longest || "??;

const wc = words.length;
    function timeFmt(min) {
      if (min < 1) return Math.round(min * 60) + " sec";
      if (min < 60) return Math.round(min) + " min";
      const h = Math.floor(min / 60);
      const m = Math.round(min % 60);
      return h + "h " + m + "m";
    }
    document.getElementById("t-read").textContent  = timeFmt(wc / 225);
    document.getElementById("t-speak").textContent = timeFmt(wc / 150);
    document.getElementById("t-hand").textContent  = timeFmt(wc / 20);
    document.getElementById("t-type").textContent  = timeFmt(wc / 40);

/* Keyword density */
    const filter = Number(document.getElementById("kw-filter").value);
    const cleaned = words.map(w => w.toLowerCase().replace(/[^a-zA-Z0-9媛-?ｊ?-??/g, "")).filter(Boolean);
    const filtered = cleaned.filter(w => !STOP.has(w) && w.length > 1);
    const freq = {};
    if (filter === 1) {
      for (const w of filtered) freq[w] = (freq[w] || 0) + 1;
    } else {
      for (let i = 0; i <= filtered.length - filter; i++) {
        const ngram = filtered.slice(i, i + filter).join(" ");
        freq[ngram] = (freq[ngram] || 0) + 1;
      }
    }
    const total = Object.values(freq).reduce((a, b) => a + b, 0) || 1;
    const sorted = Object.entries(freq).sort((a, b) => b[1] - a[1]).slice(0, 30);

text.addEventListener("input", run);
  document.getElementById("kw-filter").addEventListener("change", run);
  document.getElementById("clear-btn").addEventListener("click", () => { text.value = ""; run(); });
  document.getElementById("sample-btn").addEventListener("click", () => {
    text.value = "The quick brown fox jumps over the lazy dog. The dog barks once and then falls back asleep. Foxes are clever; dogs are loyal. A short story can teach more than a long lecture, so writers polish every sentence. Polish, polish, polish ??that is the work.";
    run();
  });
  document.getElementById("copy-table").addEventListener("click", () => {
    const rows = [...document.querySelectorAll("#freq-table tbody tr")].map(r => [...r.children].map(c => c.textContent).join("\t"));
    navigator.clipboard.writeText("Term\tCount\t%\n" + rows.join("\n"));
  });

run();
</script>
<script>(function(){var isMac=/Mac|iP(hone|od|ad)/.test(navigator.platform||"");var hint=isMac?"?쁃":"Ctrl+D";if(!document.getElementById("bookmark-toast")){var tt=document.createElement("div");tt.id="bookmark-toast";tt.className="bookmark-toast";tt.innerHTML='<span class="bookmark-toast-msg"></span><button type="button" class="bookmark-toast-close" aria-label="Close">횞</button>';document.body.appendChild(tt);tt.querySelector(".bookmark-toast-close").addEventListener("click",function(){tt.classList.remove("show");});}function showToast(msg){var t=document.getElementById("bookmark-toast");t.querySelector(".bookmark-toast-msg").textContent=msg;t.classList.add("show");}var topbar=document.querySelector(".topbar");if(topbar&&!topbar.querySelector(".bookmark-btn")){var sp=document.createElement("div");sp.style.flex="1";topbar.appendChild(sp);var b=document.createElement("button");b.type="button";b.className="bookmark-btn top";b.dataset.bookmark="page";b.title="Bookmark this tool";b.textContent="??Bookmark";topbar.appendChild(b);}document.querySelectorAll("section[id^='section-']").forEach(function(sec){var hdr=sec.querySelector(".section-header");if(!hdr)return;var sub=hdr.querySelector(".section-title-sub");if(sub)sub.style.flex="1";if(!hdr.querySelector(".bookmark-btn")){var b=document.createElement("button");b.type="button";b.className="bookmark-btn";b.dataset.bookmark=sec.id;b.title="Bookmark this view";b.textContent="??Bookmark";hdr.appendChild(b);}});document.querySelectorAll(".bookmark-btn").forEach(function(btn){if(btn._wired)return;btn._wired=true;btn.addEventListener("click",function(e){e.preventDefault();var target=btn.dataset.bookmark;if(target&&target!=="page")history.replaceState(null,"","#"+target);else history.replaceState(null,"",location.pathname);try{navigator.clipboard.writeText(location.href).then(function(){showToast("URL copied ??press "+hint+" to bookmark this view");},function(){showToast("Press "+hint+" to bookmark this view");});}catch(err){showToast("Press "+hint+" to bookmark this view");}});});})();</script>
</body>
</html>