ノーブレークスペース(NBSP)の検出と削除

通常のスペースと見た目が同じだがコードやデータファイルでパースエラーを引き起こす、隠れたノーブレークスペース(U+00A0)を検出します。

Common Characters

詳細な説明

見えない偽者:ノーブレークスペース

ノーブレークスペース(NBSP、U+00A0)は人間の目には通常のスペースとまったく同じに見えますが、完全に異なるUnicode文字です。組版テキストの特定の位置で改行を防止するために設計されましたが、ソースコード、設定ファイル、データに含まれると頻繁に問題を引き起こします。

NBSPの発生源

  • Webページからのコピーペースト:HTMLレンダリングが エンティティをテキストコピー時に実際のU+00A0文字に変換することがよくあります。
  • リッチテキストエディタ:Microsoft Word、Google Docs、Apple Pagesなどのワープロが組版目的でNBSPを挿入します。
  • macOSキーボード:macOSでOption+Spaceを押すと、通常のスペースではなくノーブレークスペースが入力されます。
  • PDF抽出:PDFから抽出されたテキストは、単語間にNBSPが含まれていることがよくあります。

ビジュアライザーの表示方法

ツールは各NBSPを黄色の度記号(°)として表示し、通常のスペース(青い中黒·で表示)と簡単に区別できます。

NBSPが引き起こす問題

# このYAMLは有効に見えますがパースに失敗します:
name: John    # コロンの後にNBSP!

# このCSSセレクタはマッチしません:
.my class { }  # クラス名にNBSP

# このJSONキーの比較は失敗します:
"user name" !== "user name"

いずれの場合も、NBSPはほとんどのテキストエディタでは見えませんが、パーサーや比較が失敗する原因となります。ホワイトスペースビジュアライザーはこれらを即座に可視化します。

NBSPの削除

CleanセクションでNBSPトグルを有効にし、Cleanをクリックします。これにより、他の文字はそのままに、すべてのノーブレークスペースが通常のスペースに置換されます。

ユースケース

Web開発者がデザインドキュメントからCSSスニペットをコピーしますが、スタイルが適用されません。CSSをホワイトスペースビジュアライザーに貼り付けると、ワープロによって不可視に挿入されたクラス名内のノーブレークスペースが発見されます。クリーニング後、CSSが正しく動作します。

試してみる — Whitespace Visualizer

フルツールを開く