>_devtools-hub

String Inspector

文字列を1文字ずつ分解 — Unicodeコードポイント・UTF-8バイト数・文字種を可視化

テキストUnicodeエンコード開発者向け

入力した文字列を1文字ずつ分解して、各文字のUnicodeコードポイント(U+XXXX)・UTF-8バイト数・文字種カテゴリ(ASCII英字/数字/記号・CJK・絵文字・空白)を色分け表示。文字数は「見た目の文字数・コードポイント数・UTF-16 の長さ(JavaScript の length)・UTF-8 バイト数」の4通りで並べて表示します。ゼロ幅スペースや NBSP などの見えない文字は名前と個数を一覧にし、正規化(NFC・NFKC)で変わる文字(結合濁点・全角英数・半角カナ・丸数字)があれば変換後の文字列を表示します。「見た目は同じなのに一致しない」「入るはずなのに入らない」の原因調べに。

広告

String Inspector

18

見た目の文字数

書記素

18

コードポイント数

Python の len()

19

UTF-16 の長さ

JavaScript の length

27

UTF-8 バイト数

MySQL の LENGTH()

ユニーク文字数 16(コードポイント単位)

正規化すると変わる文字があります(見た目が同じでも一致しない原因)

NFKC(全角英数→半角・半角カナ→全角・① → 1 など):Hello, 世界!🌏 abc123

文字種別内訳 — 凡例

ASCII英字× 8
ASCII数字× 3
ASCII記号× 1
空白× 2
CJK× 2
絵文字× 1
その他× 1

文字グリッド

char / U+ / bytes18 文字
HU+00481B
eU+00651B
lU+006C1B
lU+006C1B
oU+006F1B
,U+002C1B
·U+00201B
世U+4E163B
界U+754C3B
!U+FF013B
🌏U+1F30F4B
·U+00201B
aU+00611B
bU+00621B
cU+00631B
1U+00311B
2U+00321B
3U+00331B

Features

  • 各文字のUnicodeコードポイント(U+XXXX形式)・UTF-8バイト数を表示
  • 文字種カテゴリ(ASCII英字/数字/記号・CJK・絵文字・空白・その他)を色分け
  • 見た目の文字数・コードポイント数・UTF-16 の長さ・UTF-8 バイト数を並べて表示
  • ゼロ幅スペース・NBSP・BOM・制御文字などの見えない文字を名前つきで検出
  • NFC・NFKC で変わる文字があれば正規化後の文字列を表示
  • カテゴリ別の文字数内訳を凡例で表示
  • グリッド形式で文字を並べて一覧確認

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • 分析レポートをテキストファイルとして保存(ダイアログで保存先選択)
BOOTH で見る
広告

この作業の手順ガイド

文字数が合わない原因 — 絵文字・結合文字・サロゲートペアの数え方

画面の文字数カウントとサーバー側の判定が食い違う原因を整理します。UTF-16のコードユニット、コードポイント、書記素クラスタという3つの数え方の違いと、絵文字や結合文字が混ざったときの挙動、バイト数で決まる制限の見分け方をまとめます。

改行コードの食い違い(CRLF / LF)で起きる事故と直し方

差分が全行変更になる、行末に見慣れない記号が付く、シェルスクリプトが動かない。こうした症状の原因になる改行コードの違いを、症状からの見分け方、実際に入っている制御文字の確認、そして .gitattributes による再発防止まで順に整理します。

読みにくいHTMLを解読する手順 — 整形・構造把握・要素の特定

1行にまとまったHTMLや自動生成されたページを解読する手順を、整形→構造の把握→要素の特定→データ抽出の流れで解説します。整形で表示が変わってしまう落とし穴と、その回避方法も整理します。

リスト状のテキストを整理する手順 — 重複削除・並べ替え・形式変換

1行1データのテキストを整理する手順を、表記ゆれの吸収→重複の処理→並べ替え→コード用の形式変換の流れで解説します。辞書順で数値が正しく並ばない理由や、2つのリストの共通部分を求める方法も整理します。

文字化けを解決する手順 — 文字コード・Unicode・見えない文字

文字化けの原因を特定して直す手順を、文字コードの理解→バイト列の確認→Unicodeの特定→見えない文字の検出の流れで解説します。UTF-8とShift_JISの違いや、BOM・ゼロ幅スペース・絵文字の文字数問題も整理します。

正規表現パターン実践集 — 現場でよく使うパターンと落とし穴

メールアドレス・URL・電話番号・日付・IPアドレスなど、実際の開発現場でよく使う正規表現パターンとその注意点を解説します。


Unicode・UTF-8エンコーディングの基礎知識

プログラミングで文字列を扱う際、Unicodeコードポイントとエンコーディング(UTF-8/UTF-16)の違いを理解することは重要です。String Inspectorは文字列を分解して各文字のコードポイントとバイト数を可視化します。

UnicodeコードポイントとUTF-8の違い

Unicodeはすべての文字に一意の番号(コードポイント)を割り当てる規格です。例えばAはU+0041、「日」はU+65E5です。UTF-8はこのコードポイントをバイト列として表現するエンコーディング方式で、ASCII文字(U+0000〜U+007F)は1バイト、日本語などは3バイト、絵文字は4バイトで表現します。

絵文字とサロゲートペアの注意点

現代の絵文字(U+1F000以上)はUTF-16では2つのコード単位(サロゲートペア)で表現されるため、JavaScriptの`length`プロパティが実際の文字数と異なることがあります。例えば🌏は`"🌏".length === 2`です。ES2015以降は`[...str].length`や`for...of`でコードポイント単位に数えられます。ただし家族の絵文字「👨‍👩‍👧」は人物3つを ZWJ でつないだ5コードポイント(length は8)なので、見た目の1文字として数えるには`Intl.Segmenter`(granularity: "grapheme")を使います。String Inspector はこの4通りの数え方を並べて表示します。

バイト数が重要な場面

データベースの文字列カラム(VARCHAR(255) が255文字か255バイトかはDBによる。MySQL・PostgreSQL は文字数、SQL Server の varchar はバイト数、Oracle は設定による)・HTTPヘッダーのContent-Length・ファイルシステムのファイル名上限(多くのOSで255バイト)などではバイト数が重要です。UTF-8では1文字が1〜4バイトになるため、「255文字まで」なのか「255バイトまで」なのかを意識する必要があります。

CJK文字の扱い

CJK(Chinese, Japanese, Korean)の漢字・仮名・ハングルはUTF-8で3バイトです。Twitterの文字数カウントなどは独自のカウント方法(CJKを2文字分とカウント)を使うサービスもあります。バックエンドのバリデーションとフロントエンドの表示で文字数の定義が違うとバグの原因になります。

Related Tools

Lockfile Diff

package-lock.json の更新前後を比較 — 版の動きをメジャー/マイナー/パッチで分類

npmバージョン管理開発者向け

使ってみる →

Text Encoding Checker

文字コードを判定して UTF-8 に変換 — 化けた文字列の復元も

テキストエンコード開発者向け

使ってみる →

Line Ending Inspector

改行コードを検査 — CRLF / LF / CR の内訳と混在、BOMの有無

テキストエンコード開発者向け

使ってみる →

このツールを共有する