HTML轉JS字串

把多行 HTML 寫成 JavaScript 字串

這項工具將貼上的 HTML 文字逐行包進 JavaScript 程式碼，方便檢查或複製到舊有腳本與固定模板。輸入是文字；輸出是程式碼文字，不會執行標記，也不會顯示 HTML 預覽。預設的「字串變數」模式會產生 var html =，每一行以單引號包住，再用 + 串接；你也可以切換外層為雙引號。轉換時會跳脫所選外層引號及原有反斜線，讓它們不會直接破壞字串定界。

例如輸入 <p class="note">Hi</p>，預設模式會得到 var html = '<p class="note">Hi</p>';。HTML 標籤、屬性和內容仍是原來的文字；這個轉換不等於 HTML 實體編碼，也不會判斷標籤是否正確。

兩種輸出模式各自適用的工作

「字串變數」適合需要把一段標記保存成變數的情況，多行預設以加號明確連接。另一種模式會為每一行產生一條 document.writeln(...); 呼叫。介面上的模式名稱可能簡寫為 document.write，但實際產生的是帶有 ln 的 writeln。此方法會把字串交給文件的 HTML 解析流程，屬於較舊的寫入方式，理解舊程式時可用來比對格式；新程式應先評估更合適的 DOM 或模板做法。

從貼上到取得輸出

1. 貼上 HTML

   在輸入區貼上要轉換的標記，也可載入內建示例；清除按鈕會移除目前輸入。多行縮排會保留在各自的字串內容中。

2. 選擇輸出形式與引號

   需要變數時保留「字串變數」；若是比對既有逐行寫入程式，選擇另一種模式。單引號開啟時，輸出以單引號定界並跳脫 HTML 中的單引號；關閉時改以雙引號定界並跳脫雙引號。

3. 檢查、複製或下載

   輸出會隨輸入及選項更新。可複製結果，或下載為 converted.js。貼回專案後，請在實際使用的 JavaScript 環境檢查語法與呈現結果。

用一小段多行文字核對結果

使用預設的變數、單引號和加號串接模式，輸入如下：

<div class="card">
  <p>歡迎</p>
</div>

輸出會逐行包成字串並以 + 連接，概念如下：

var html = '<div class="card">' +
'  <p>歡迎</p>' +
'</div>';

若 HTML 屬性使用雙引號，預設單引號通常可減少屬性引號的跳脫；若內容本身有很多單引號，可以改用雙引號，再檢查輸出中哪些雙引號已加上反斜線。

使用結果前常見的確認事項

字串跳脫不代表內容安全

把引號與反斜線寫成 JavaScript 字串可避免部分語法衝突，但不會讓 HTML 內容變得可信或安全。

• 若輸入含使用者可控制的標記，不要只靠本工具輸出後就插入頁面。當字串進入 HTML 解析情境時，事件屬性、危險連結或腳本等內容仍可能造成安全問題；請依應用程式的信任邊界採取輸出編碼與清理措施。
• document.writeln() 已不建議用於新程式，且在文件載入完成後呼叫可能改變或覆寫文件內容。避免把它當成一般動態內容插入方式。
• 工具不檢查 HTML 是否完整、不驗證輸出 JavaScript 語法，也不保證所有輸入情境都適用。尤其行尾反斜線選項的輸出應先在目標環境驗證；安全敏感用途應由應用程式本身處理並測試。