XSLT + JavaScript onclick 事件中單雙引號跳脫最佳實踐

問題場景

XSLT 模板產生 HTML 表格，每列 onclick="SelectSurveyItem('{@ClusterId}','{@Name}')"。當 @Name 含單引號（如 O'Neil）或雙引號時，JavaScript 語法中斷，導致 IE 報錯。

核心原則：雙層跳脫

1. JavaScript 字串層：單引號 → \'，雙引號 → \"。
2. HTML 屬性層：& → &，" → "，' → '（或 '，HTML5 支援）。

XSLT 1.0 解決方案

<xsl:template name="jsEscape">
  <xsl:param name="str"/>
  <xsl:choose>
    <xsl:when test="contains($str, '"')">
      <xsl:call-template name="jsEscape">
        <xsl:with-param name="str" select="concat(substring-before($str, '"'), '&quot;', substring-after($str, '"'))"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:when test="contains($str, ''')">
      <xsl:call-template name="jsEscape">
        <xsl:with-param name="str" select="concat(substring-before($str, '''), '\'', substring-after($str, '''))"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:otherwise><xsl:value-of select="$str"/></xsl:otherwise>
  </xsl:choose>
</xsl:template>

<td onclick="SelectSurveyItem('{@ClusterId}','<xsl:call-template name="jsEscape"><xsl:with-param name="str" select="@Name"/></xsl:call-template>')">...</td>

現代替代方案（推薦）

• data-* 屬性 + 事件委派：
  <td data-id="{@ClusterId}" data-name="{@Name}" class="clickable">
  單一 document.addEventListener('click', e => { if(e.target.matches('.clickable')) SelectSurveyItem(e.target.dataset.id, e.target.dataset.name); })
  完全避免內聯跳脫地獄，且符合 CSP 政策。
• XSLT 2.0/3.0：內建 escape-html-uri()、json-to-xml() 等函式，跳脫更簡潔。

總結

舊專案若必須維持內聯 onclick，請在 XSLT 中實作遞迴跳脫模板，優先處理雙引號（HTML 屬性界定符），再處理單引號（JS 字串界定符）。新專案強烈建議改用 data-* + 事件委派架構，徹底消除跳脫複雜度。