HTML→JS文字列変換

HTMLをJavaScriptの文字列ソースにする

複数行のHTMLをJavaScriptコードへ貼り付けるとき、文字列を囲む引用符や、HTML内のバックスラッシュがJavaScriptの構文とぶつかることがあります。このツールは入力を行ごとに扱い、選んだ引用符に合わせて必要な引用符とバックスラッシュをエスケープし、コピーできるJavaScriptソースを作ります。HTMLのタグを解析したり、表示結果をプレビューしたりする変換ではありません。

出力モードと改行の扱い

「文字列変数」では var html = に続けて各行を文字列にし、標準設定では + で連結します。行の内容に含まれる字下げはそのまま残ります。「document.write」モードでは各入力行について document.writeln(...); を1行ずつ出力します。これは呼び出しコードの生成であり、ツールがHTMLを実行するわけではありません。

単引用符を選ぶと入力中の ' を、二重引用符を選ぶと " をエスケープし、どちらの設定でも元のバックスラッシュは二重にします。変数モードの「行末にバックスラッシュ」は、最終行以外の行末に行継続用の記号を加える設定です。通常の複数行出力には、行ごとの文字列を加算する標準設定が確認しやすいでしょう。

用途に合わせて変換結果を整える

1. HTMLを入力する

   変換したい断片を入力欄に貼り付けます。例ボタンでサンプルを読み込み、消去ボタンで入力を空にできます。複数行のまま貼り付けると、行単位で出力されます。

2. 出力形式を選ぶ

   JavaScript内の変数として持ちたい場合は「文字列変数」、旧来の書き込み形式を確認したい場合は「document.write」を選びます。後者は実際の出力では document.writeln の呼び出しになります。

3. 引用符と改行方法を決める

   既定の単引用符でHTML属性の二重引用符をそのまま残せます。入力に単引用符が多い場合は二重引用符に切り替えて比較してください。「行末にバックスラッシュ」は変数モードだけに表示されます。

4. 出力を確認して持ち出す

   結果欄で生成コードを見直し、コピーまたは converted.js としてダウンロードします。採用前に、使用するJavaScript環境で構文を検査してください。

例として <div class="card"> を単引用符・標準の連結設定で入力すると、変数モードでは var html = '<div class="card">'; の形になります。字下げも文字列に入るため、整形済みHTMLを使う場合は空白が必要かも確認します。

出力形式についての質問

構文上のエスケープとHTMLの安全性は別

引用符やバックスラッシュをエスケープしても、入力HTMLの内容が無害化されたり、安全な挿入先に変わったりするわけではありません。

• 入力にスクリプト、イベント属性、危険なリンクなどが含まれていても、この変換は内容を除去・検査しません。信頼できないHTMLをページへ挿入する前に、用途に合った安全な処理を別途行ってください。
• document.writeln は文書への書き込み方法に固有の制約があり、読み込み後の呼び出しでは文書内容を置き換える場合があります。XHTMLでは使用できず、MDNもセキュリティ上の注意を示しています。新しい画面構築方法として安易に選ばず、既存コードの確認など用途を限定してください。
• このツールはHTMLの妥当性、閉じタグ、ブラウザー互換性、生成後のJavaScript構文を検証しません。実際に使う前に、対象プロジェクトの規約と実行環境で結果を確認してください。