piapia123
ja

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 方向:段落、リスト、引用、コードブロック、インライン書式に対応
  • 処理はすべてブラウザ内で完結し、内容は送信されません

使い方

  1. 掲示板コードまたは HTML を貼り付ける
  2. 方向は通常選ぶ必要がありません —— 先頭が < なら HTML として扱います
  3. 必要なら「改行を br にする」をオフにする
  4. 結果をコピーする

よくある質問

入れ子の処理にスタックが必要なのはなぜですか?
ある `[/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>` が空行を二重の行間にしてしまいます。貼ったあと行間が広すぎると感じたら、このオプションをオフにしてください。
内容は送信されますか?
いいえ。変換はすべてブラウザのメモリ上で行われ、ページは一切リクエストを送りません。オフラインでも動作します。

関連ツール