二方向入力と交換
プレーンテキスト ⇔ HTML相互変換ツールは,入力されたプレーンテキストからHTMLソースコードを生成する「text2html」処理と,反対にHTMLソースコードからタグを除去してテキスト本文を抽出する「html2text」処理の2つの方向を備えています.画面上部にある「変換方向を切り替え」ボタン(左右の矢印アイコン)を押下することで,アプリケーションの内部状態である direction が切り替わり,入力領域と出力領域のデータ方向が入れ替わります.
テキストからHTMLへの変換時には,画面左側のテキストエリアに入力した文字列を React の状態管理によってリアルタイムで監視し,入力のたびにHTML化処理が実行されて右側の出力領域に結果が反映されます.HTMLからテキストへの変換モードに切り替えた場合は,入力領域がHTMLコードの受け入れ口となり,出力側にはタグが除外されたプレーンテキストが表示される設計です.
方向の切り替えを実行した際,直前まで出力領域に表示されていたデータがそのまま入力領域へと引き継がれる機能があります.これにより,一度変換した結果をベースにしてさらに逆方向の処理を試すことが可能です.ただし,本ツールにローカルファイルの読み書きや保存の機能は実装されておらず,変換対象の文字列はすべてテキストエリアへの手動入力,またはクリップボードからの貼り付け操作によって供給する必要があります.
画面上の「クリア」ボタン(ゴミ箱アイコン)をクリックすると,入力テキストおよび出力結果が両方とも同時に空文字へ消去され,初期状態にリセットされます.入力対象の文字列の変換処理はすべてお使いのWebブラウザの内部機構を用いて実行される仕様となっています.
段落・改行・文字escape
プレーンテキストからHTMLへの変換モードにおいては,入力された文字列内の改行位置に基づいて段落と改行タグの自動挿入が行われます.具体的には,連続する2回以上の改行(\n\n+ に合致する空行を挟む改行)を正規表現を用いて検知した場合,そこで文字列のブロックを分割し,それぞれのブロックを独立した <p>(段落)タグで囲みます.
一方,ブロック内に存在する単独の改行については,段落を分割せず,行末に <br /> タグを挿入することでHTML上の改行として表現します.
また,HTMLとして解釈されると意図しない動作を引き起こす特殊文字については,変換処理の初期段階で一括してエスケープ(文字参照への置換)が行われます.対象となるのはアンパサンド(& は &),小なり記号(< は <),大なり記号(> は >),ダブルクォーテーション(" は "),およびシングルクォーテーション(' は ')の5種類です.
このエスケープ処理により,プレーンテキスト内にHTMLのタグ構文と一致する文字列が含まれていた場合でも,それらが実際のHTMLタグとして解釈されることを防ぎ,単なる文字列としてブラウザに表示させることが可能です.
このエスケープ処理はテキストからHTMLへの変換時に常に適用され,利用者が設定で無効化することはできません.空白文字の連続入力については,そのままの半角スペースとして出力コードに反映されますが,HTMLの描画仕様上,ブラウザでの表示時には連続する半角スペースは1つの空白として扱われます.インデント用の特別なタグ変換や,非破壊スペース( )への自動置換などは行われません.
リンクと単層リスト
テキストからHTMLへの変換機能では,設定用のスイッチを切り替えることで,URLの自動リンク化および箇条書き文字列のリスト化を個別に制御できます.
「URLをリンク(<a>)化」の設定を有効(デフォルトで true の状態)にした場合,入力テキスト内に存在する http:// または https:// から始まり,空白や < を含まない文字列の並びを正規表現 /(https?:\/\/[^\s<]+)/g によって検索します.
合致した文字列は,<a href="URL" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline font-semibold">URL</a> の形式に自動置換されます.
この処理により,単なる文字列としてのURLが別タブで開くアンカーリンクへ変換されます.スイッチを操作して設定を無効にした直後,現在入力されているテキストに対して即座に再変換処理が走り,リンクタグを含まない通常の文字列として出力に反映されます.
「箇条書き箇所のリスト(<ul>/<ol>)化」の設定を有効にすると,改行で区切られた各ブロック内のすべての行が,特定の記号で始まっているかどうかを判定します.ブロックの全行がハイフンまたはアスタリスクとそれに続く空白(例: - 項目)で始まっている場合は,順不同リストの <ul> タグでブロック全体を囲み,各行の記号を削除した上で <li> タグに変換します.
同様に,ブロックの全行が数字とピリオドと空白(例: 1. 項目)で始まっている場合は,順序付きリストの <ol> タグで囲み <li> に変換します.ただし,これらのリスト変換は単一の階層(単層)のみを対象としており,行頭の空白の深さによる入れ子(ネスト)構造の解析や,元の数字の維持(start属性の付与など)には対応していません.
HTML本文の文字抽出
HTMLソースからプレーンテキストへの変換モードでは,入力されたHTMLコードからタグを除去し,テキスト本文のみを抽出する処理が行われます.この抽出処理は単純な正規表現置換に依存するのではなく,ブラウザの DOMParser APIを利用して入力文字列を text/html 型のDOMツリーとして解釈する仕組みを採用しています.
解析過程で,表示や挙動に影響を与える <script>,<style>,<template> のタグは,querySelectorAll を用いて中身ごとDOMツリーから削除されます.これにより,JavaScriptやCSSがテキスト本文として抽出されることを防ぎます.
その後,DOMの階層を巡回し,テキストノード(Node.TEXT_NODE)の文字列を結合します.要素ノード(Node.ELEMENT_NODE)通過時にはタグの種類に応じた改行調整が行われ,<br> で1回の改行,<li> では改行と中黒(•)を挿入します.
また,段落や見出しを表す <p>,<div>,<ul>,<ol>,<h1>〜<h6>,表の行を示す <tr> の終了位置では,2回の改行を追加してブロック間の間隔を確保します.
この処理はテキスト抽出に特化しているため,画像タグの alt 属性,リンクタグの href 属性のURL,表の列(<td>)の構造を示す整形機能は保持されません.例外エラー発生時は,正規表現を用いた代替置換処理へ移行します.
コードと制限付きプレビュー
テキストからHTMLへの変換を行った際,右側の出力領域には「HTMLソース」と「プレビュー」の2つのタブが用意されています.「HTMLソース」タブでは,変換処理によって生成されたHTMLコードそのものが表示されます.この領域は,出力結果のコードをコピーして他の用途に利用するための確認画面として機能し,生成された <p> や <br />,エスケープされた文字参照などのタグ構造を直接視認することが可能です.
出力内容は whitespace-pre-wrap によって折り返して表示され,長いコードは表示欄で確認できます.
一方,「プレビュー」タブに切り替えると,生成されたHTMLコードを実際のWebブラウザがどのように描画するかをシミュレートした画面が表示されます.このプレビュー画面は SafeHtmlPreview コンポーネントを介して描画されており,ブラウザが提供する iframe の sandbox 属性やCSP(コンテンツセキュリティポリシー),およびReact側の属性制限を利用して,JavaScriptの実行や外部リソースの意図しない読み込みを制限した状態での表示を試みます.
ただし,ここで提供されている制限機能は,プレビュー画面における一時的な表示上の保護を目的としたものであり,生成されたHTMLソースコード自体のサニタイズ(無害化処理)を認証・検証するものではありません.出力テキストとして提供されるHTMLコードは,あくまで入力テキストに対して規定のエスケープと指定のタグ付けを行った結果であり,「プレビュー」タブで視覚的に問題なく表示されたからといって,そのコードを他のプラットフォームに持っていった際に安全に動作すると断定するものではありません.
設定や制限の範囲内での描画確認として利用してください.
コピー前確認と非可逆性
変換された結果のテキストやHTMLソースは,出力領域の上部に設置された「コピー」ボタン(クリップボードアイコン)をクリックすることで,OSのクリップボードへ送られます.navigator.clipboard.writeText APIを利用してコピーが完了すると,アイコンが緑色のチェックマークに変化し,約2秒後に元の状態へ戻る仕様となっています.
コピーを行う前には,出力領域の文字列が意図した形式になっているかを必ず確認する必要があります.
本ツールにおける「テキストからHTML」および「HTMLからテキスト」の変換処理は非可逆の性質を持っています.例えば,プレーンテキストをHTMLに変換した際,元の文字列に存在した < や > は < や > にエスケープされ,連続した改行は <p> タグのブロックに分割されます.
この出力されたHTMLを再度テキストに戻す方向で処理を行っても,DOMParser によるテキストノードの結合と要素の再調整が行われるため,元々入力したプレーンテキストの改行の数や空白の入り方と完全に一致する結果は得られません.無損失での往復(ラウンドトリップ)変換は保証していません.
また,本ツールは入力された文字列をブラウザ内のメモリ上で一時的に変換処理するだけであり,入力データを外部サーバーのデータベースへ保存するような機能は実装されていません.しかし,ブラウザ上で動作する以上,Cookieなどの情報は後続の別タブ等で行われる通常のHTTPリクエストにおいてブラウザの仕様に従い送信され得るため,本ツールの機能としてサイト全体の通信状態を遮断制御しているわけではありません.
処理機能の範囲と非可逆性を理解したうえで,必要な出力結果をコピーして利用してください.