No-Break Space Busters

ちょっとタイトルが紛らわしいですが   で見た目を調整するのはやめましょう的な内容ではありません^[1]。

Headless CMS の RichText 系フィールドを調べていたときに「連続した空白をコピペしたらどうなる？」などを試していたら、あちこちに U+00A0 文字が入り込んで頭を抱えました。

今回はそのときに使った「U+00A0 の存在を調べる」方法などのメモになります(  と実態参照で記述されている分にはよいのですが、文字として入力されていると普通の空白と見分けがつきにくい)。

サーチ

U+00A0 を表示や検索する方法です。

VSCode

表示

(おそらく Ver.1.63 から)U+00A0 などはデフォルトでハイライト表示されます。

VSCode での表示

Unicode highlighting All uncommon invisible characters in source code are now highlighted by default:

検索

Find(Ctrl + F)で正規表現を有効にし \u00a0 を入力します。これは Search(Ctrl + Shift + F)や VSCodeVim の / でも同じです。

Vim

表示

デフォルトでは通常の空白と同じように表示されます。

Vim のデフォルト表示

listchars で nbsp を設定すると区別できます。

:set listchars=nbsp:&
:set list

listcharsを設定した表示

検索

/ で \%u00a0

CLI

No-Break Space が含まれる行を表示します。

$ grep -H $'\u00a0' -- *.md
memo.md:  input: './src/index.ts',
memo.md:  output: {
memo.md:    file: './dist/index.cjs',
memo.md:    format: 'cjs',
memo.md:    exports: 'default'
memo.md:    },
memo.md:  plugins: [
memo.md:    typescript({
memo.md:      //module: 'commonjs'
memo.md:    }),
memo.md:    nodeResolve(),
memo.md:    commonjs({
memo.md:      // extensions: ['.js', '.ts']
memo.md:    })
memo.md:  ]
memo.md:  node1["start"] --> node2["end"]

デストロイ

エディターの場合は検索の要領で文字を入力し置換します。

CLI では sed などで対応できます。

$ sed -e 's/'$'\u00a0''/ /g' -i -- *.md

ちなみに

Zenn 記事を書く場合「mermaid 用のコードブロック内に U+00A0 があったらどうなる？」は気になるところですが、軽く試した感じでは「インデントで使ってもエラーにならなかった」です。

危ないので実際には普通の空白文字を使いますが。

おわりに

冒頭の問題はとりあえず対応できました。

しかし、No-Break Space の他にも「なんとか Space」がいくつかあったりします。「文字コード関連は奥が深い」と毎回痛感いたします。

脚注

1. タイトルは UI 上の文字化けを解決するツールをもじってつけました。