XSLT动态生成表格含'引发JavaScript未捕获语法错误咨询

这个问题我太熟悉了——当你用XSLT把XML里的内容直接输出到JavaScript代码里时，单引号（不管是XML里的'还是原生的'）会直接打断JS的字符串包裹，比如var name = 'The State's Example'，浏览器一看就懵了，直接抛出语法错误。下面给你几个实用的解决办法，按推荐程度排序：

1. 优先用DOM操作获取内容（最安全） #

别直接把XML内容硬塞进JS代码里，先让XSLT把内容渲染成HTML元素，再用JS去读取元素的文本内容。比如：

XSLT代码 #

<!-- 生成表格单元格时给个类名标记 -->
<td class="item-name">
  <xsl:value-of select="Name"/>
</td>

JavaScript代码 #

// 通过DOM选择器获取文本，完全不用管引号问题
var itemName = document.querySelector('.item-name').textContent;

这种方法从根源上避免了字符串转义的麻烦，还更符合前端开发的最佳实践。

2. 在XSLT中转义单引号 #

如果你必须把内容直接输出到JS字符串里，那就在XSLT里把单引号转成JS能识别的转义序列\'。

针对XSLT 2.0及以上版本 #

用内置的replace函数就行，注意XSLT里的引号转义细节：

<script>
  var itemName = '<xsl:value-of select="replace(Name, &quot;&apos;&quot;, &quot;\\&apos;&quot;)"/>';
</script>

这里"'"是XSLT里表示单引号的写法，\\'"则是生成\'的转义写法（因为XSLT里反斜杠本身需要转义成\\）。

针对XSLT 1.0版本（没有replace函数） #

写个递归模板来处理单引号转义：

<!-- 定义转义模板 -->
<xsl:template name="escape-single-quote">
  <xsl:param name="text"/>
  <xsl:choose>
    <xsl:when test="contains($text, '&apos;')">
      <xsl:value-of select="substring-before($text, '&apos;')"/>
      <xsl:text>\'</xsl:text>
      <xsl:call-template name="escape-single-quote">
        <xsl:with-param name="text" select="substring-after($text, '&apos;')"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$text"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<!-- 使用模板 -->
<script>
  var itemName = '<xsl:call-template name="escape-single-quote"><xsl:with-param name="text" select="Name"/></xsl:call-template>';
</script>

3. 用双引号包裹JS字符串（临时应急） #

如果你的XML内容里几乎没有双引号，可以把JS字符串的包裹符换成双引号，这样单引号就不会触发语法错误：

<script>
  var itemName = "<xsl:value-of select="Name"/>";
</script>

但要注意，如果内容里出现双引号，这个方法就会失效，所以只适合临时应急用。

4. 输出JSON格式（规范但稍复杂） #

把XML数据转换成合法的JSON结构输出，然后用JSON.parse解析，这种方法能处理所有特殊字符（包括引号、换行、反斜杠等）：

<script>
  var itemData = JSON.parse('{
    "name": "<xsl:value-of select="replace(Name, &quot;&quot;&quot;, &quot;\\\\&quot;&quot;)"/>",
    "assetType": "<xsl:value-of select="replace(AssetType, &quot;&quot;&quot;, &quot;\\\\&quot;&quot;)"/>"
  }');
  var itemName = itemData.name;
</script>

这里需要同时转义双引号，写法稍微繁琐，但通用性最强。

内容的提问来源于stack exchange，提问作者user1884330