[jQuery] 在 jQuery 中處理 single/double quote

在透過 jQuery 設定標籤中的內容時, 有時會遇到內容中已經有單引號(') 或雙引號(") 的問題.
例如: 從資料庫抓出了如下的一段 HTML 碼

?

1	<b><font color="#FF0000">This is a test</font></b>

接著透過 jQuery 的 .html() 將該資料設定至指定的一個 <div> 內:

?

1 2 3 4

<div id="divMsg"></div> <script type="text/javascript"> $("#divMsg").html("${msg}"); </script>

此時, 因為原本的 msg 變數中已經有雙引號存在, 所以若實際檢視輸出的 HTML 原始碼, 就會是以下的內容:

?

1 2 3 4

<div id="divMsg"></div> <script type="text/javascript"> $("#divMsg").html("<b><font color="#FF0000">This is a test</font></b>"); </script>

由於 .html() 中的格式已經被破壞掉了, 所以這部分的程式會有錯誤訊息(不正確的字元)產生.
目前我知道的解法有以下三種: (都需在 Server 端先處理要輸出的文字內容)

1. 如果想用 .html("") 設定資料, 就將內容中的雙引號(") 轉換為斜線加雙引號(\"), 使其在 HTML 原始碼上形成如下的結果: 
   ?

   1 2 3 4

   <div id="divMsg"></div> <script type="text/javascript"> $("#divMsg").html("<b><font color=\"#FF0000\">This is a test</font></b>"); </script>

2. 相對地, 如果是要用單引號設定資料(ex: .html('')), 就將內容中的單引號(') 全轉為斜線加單引號(\'), 使其在 HTML 原始碼上形成如下的結果:
   ?

   1 2 3 4

   <div id="divMsg"></div> <script type="text/javascript"> $("#divMsg").html('<b><font color=\'#FF0000\'>This is a test</font></b>'); </script>

3. 另一種是將內容先 encode 過後, 再透過 jQuery 做轉換:
   ?

   1 2	var strMsg = "<c:out value="${msg}"/>"; $("#divMsg").html($("<div/>").html(strMsg).text());

   上面的程式碼是透過 JSTL 中的 <c:out> 將內容編碼, 然後再利用 jQuery 產生一個空的 <div/> 去進行轉換.
   實際的 HTML 原始碼會是如下的內容:
   ?

   1 2 3

   var strMsg = "&lt;b&gt;&lt;font color=&#039;#FF0000&#039;&gt;This is a test &lt;/font&gt;&lt;/b&gt;"; $("#divMsg").html($("<div/>").html(strMsg).text());

個人是覺得前兩種比較直覺且簡單. 第三種只是用來試試 .html() 與 .text() 之間的資料轉換.