UBB と HTML の相互変換
テキスト処理はすべてブラウザ内で完結します。データは送信されません
掲示板コード(UBB、Discuz! 系の `[b]` `[url]` `[img]`)を HTML に、またはその逆に変換します。最も重要なのは入れ子です:`[b]太字[i]斜体[/i]太字の続き[/b]` は正しく入れ子になったタグを出力しなければなりませんが、検索置換の連鎖で作られた変換器にはできません —— ある `[/i]` がどの `[i]` に対応するかはスタックだけが知っており、置換方式は交差したタグを出してしまいます。あと 3 点:未知のタグはそのまま残します(`[hide]` や `[attach]` は掲示板ごとの拡張で、捨てると利用者のレイアウトを黙って削ることになります)。`javascript:` のリンクはクリック可能な `<a>` にしません(出力は掲示板に貼るもので、それは XSS の入口です)。本文中の `<` と `&` はエスケープします(そうしないと「1 < 2」が壊れたタグになり、以降すべてが歪みます)。
機能
- インラインタグ:太字、斜体、下線、打ち消し線、色、サイズ、フォント、配置
- リンクの 2 通りの書き方([url]アドレス[/url] と [url=アドレス]文字[/url])、メール、画像
- 引用([quote=名前] の出典付き)、コードブロック、順序付き・順序なしリスト
- 入れ子を正しい順序で閉じる —— 検索置換方式にはできないことです
- 閉じ忘れたタグは末尾で補い、余分な終了タグはただの文字として扱います
- タグ名は大文字小文字を区別しません([B] と [b] は同じ)
- サイズは Discuz の 1〜7 段階で対応付け、font-size: 7px にはなりません
- [code] ブロック内の角括弧は解析しません —— それがコードそのものです
- 未知のタグはそのまま残すので、利用者のレイアウトが消えません
- javascript: のリンクはただの文字になり、クリック可能な <a> を出しません
- HTML → UBB 方向:段落、リスト、引用、コードブロック、インライン書式に対応
- 処理はすべてブラウザ内で完結し、内容は送信されません
使い方
- 掲示板コードまたは HTML を貼り付ける
- 方向は通常選ぶ必要がありません —— 先頭が < なら HTML として扱います
- 必要なら「改行を br にする」をオフにする
- 結果をコピーする
よくある質問
- 入れ子の処理にスタックが必要なのはなぜですか?
- ある `[/i]` がどの `[i]` を閉じるのかは、タグの並び全体を見て初めて分かるからです。検索置換で 1 つずつ置き換える方式では、`[b]太字[i]斜体[/i]太字の続き[/b]` は交差したタグ(`<strong>太字<em>斜体</strong>太字の続き</em>`)になり、ブラウザが勝手に補うことになります。しかもこの種の誤りは何も報告しません —— 表示がおかしいだけです。そのためここでは 1 回走査してスタックに出し入れし、最後に閉じ忘れを補います。
- 未知のタグはどうなりますか?
- そのまま残します —— 変換も削除もしません。`[hide]`(返信で閲覧)、`[attach]`(添付)、`[media]`(動画)は掲示板ごとの拡張で、Discuz 以外に対応物がなく、何にすべきかツールには分かりません。残せば「変換されていないものがある」と一目で分かりますが、削ると内容が欠けた投稿が返り、画面上は何も分かりません。
- リンクにならないものがあるのはなぜですか?
- スキームが `javascript:` や `data:` などだからです。出力は掲示板やブログに貼るもので、そこでのクリック可能な `javascript:` リンクは XSS の入口です。このツールは http、https、ftp、mailto、tel などの通常のスキームのみ通し、それ以外は文字だけを残して `<a>` を出しません。
- [size=5] は何ピクセルですか?
- Discuz のサイズは 1〜7 の段階であってピクセル値ではありません。数値をそのまま使うと `font-size: 7px` という読めない値になります。ここでは Discuz のテンプレートが実際に使う値に対応付けています:1→12px、3→16px(既定)、5→24px、7→48px。未知の段階は 16px にフォールバックします。
- 改行は br にすべきですか?
- 掲示板の慣例では改行は改行なので、既定でオンです。ただし `white-space: pre-wrap` で描画するサイトでは、余分な `<br>` が空行を二重の行間にしてしまいます。貼ったあと行間が広すぎると感じたら、このオプションをオフにしてください。
- 内容は送信されますか?
- いいえ。変換はすべてブラウザのメモリ上で行われ、ページは一切リクエストを送りません。オフラインでも動作します。
関連ツール
HTML 実体参照
エンコード< > & と引用符を HTML 実体参照に変換し、文字へ戻します。デコードは1回だけで、&lt; は山括弧ではなく < になります。すべてブラウザ内で処理します。
HTML 整形
整形HTML をオンラインで整形・圧縮:タグの階層ごとにインデントし、テキストとインライン要素は同じ行のまま。script と pre の中身はそのまま保持します。
Markdown プレビュー
テキスト左に Markdown を書くと右にリアルタイム描画。見出しにはアンカーと目次が付き、コードブロックは色分けしてコピーできます。貼り付けた HTML は文字のまま。
テキスト整形
テキストログや表からコピーした1列を整形します。重複行の削除、並べ替え、空行・前後の空白・行番号の削除、空白のまとめを個別に切り替えできます。
テキスト差分
テキスト2つのテキストを行ごとに比較し、追加・削除・未変更の行をハイライト表示します。変更は最小差分で整列し、すべてブラウザ内で処理します。
文字数カウント
テキスト英語は単語数、日本語や中国語は字数で別々に数えます。文字数・行数・バイト数・読了時間も同時に出し、すべてブラウザ内で処理するので送信しません。