【JavaScript】TextEncoderと文字コード判定で「文字数・UTF-8/Shift_JISバイト数」をリアルタイム解析する単一HTMLツール

概要
外部通信なし・ライブラリ不要で、入力テキストの文字数（空白除外・改行除外・単語数）およびバイト数（UTF-8 / Shift_JIS相当）をリアルタイムに計算する単一HTMLツールです。

実装ポイント
UTF-8バイト数取得: ブラウザ標準の TextEncoder.prototype.encode() を活用し、サロゲートペアやマルチバイト文字も正確にカウント。

全角2/半角1バイト判定: charCodeAt を参照し、ASCII範囲・半角カナとマルチバイト文字を正確に振り分けてShift_JIS想定バイト数を算出。

入力イベント駆動: input イベントによる高速リアルタイム集計。

Text & Byte Analyzer - 文字数・バイト数詳細解析ツール

📝 Text & Byte Analyzer (リアルタイム解析)

テキスト入力（ローカル処理・通信なし）

クリア テキストをコピー

<div>
  <div class="card">
    <h3 style="margin-top:0; margin-bottom:16px;">📊 解析結果</h3>
    <div class="metrics-grid">
      <div class="metric-box">
        <div class="metric-label">文字数 (空白含む)</div>
        <div class="metric-value"><span id="charCount">0</span><span class="metric-unit">文字</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">文字数 (空白・改行除く)</div>
        <div class="metric-value"><span id="charCountNoSpace">0</span><span class="metric-unit">文字</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">単語数 (Words)</div>
        <div class="metric-value"><span id="wordCount">0</span><span class="metric-unit">語</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">行数 / 段落数</div>
        <div class="metric-value"><span id="lineCount">0</span> / <span id="paraCount">0</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">UTF-8 バイト数</div>
        <div class="metric-value"><span id="utf8Bytes">0</span><span class="metric-unit">B</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">全角2/半角1 換算 (Shift_JIS想定)</div>
        <div class="metric-value"><span id="sjisBytes">0</span><span class="metric-unit">B</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">原稿用紙 (400字詰)</div>
        <div class="metric-value"><span id="genkoSheets">0.0</span><span class="metric-unit">枚分</span></div>
      </div>
      <div class="metric-box">
        <div class="metric-label">読了目安時間 (500字/分)</div>
        <div class="metric-value"><span id="readingTime">0</span><span class="metric-unit">分</span></div>
      </div>
    </div>
  </div>
</div>

クリップボードにコピーしました