Xpages中创建含单引号的CSJS变量时如何避免代码报错？

服务端处理方案 #

1. 使用XSP内置的@JavaScriptEncode()函数 #

在EL表达式中直接对输出内容做JS转义，自动处理单引号、双引号等特殊字符，避免破坏JS字符串结构：

<xp:scriptBlock>
  <xp:this.value><![CDATA[
    var news_message = '#{javascript:@JavaScriptEncode(utilityBean.readLatestNews())}';
    var news_location = '#{javascript:@JavaScriptEncode(sessionScope.get("location"))}';
    var news_title = '#{javascript:@JavaScriptEncode(sessionScope.get("title"))}';
  ]]></xp:this.value>
</xp:scriptBlock>

转义后Jane's会被处理为Jane\'s，不会提前闭合JS字符串引号。

2. 在JavaBean中手动转义特殊字符 #

如果需要自定义转义逻辑，可以在utilityBean.readLatestNews()方法里对返回内容做JS特殊字符转义：

public String readLatestNews() {
    String rawNews = getRawNewsFromSource();
    // 转义JS敏感字符：反斜杠、单引号、双引号、换行符等
    return rawNews.replace("\\", "\\\\")
                  .replace("'", "\\'")
                  .replace("\"", "\\\"")
                  .replace("\n", "\\n")
                  .replace("\r", "\\r");
}

客户端处理方案 #

1. 通过隐藏DOM元素传递内容 #

避开直接拼接JS字符串的方式，把服务端内容渲染到隐藏DOM里，客户端JS读取元素内容：

<!-- 服务端渲染隐藏元素存放内容 -->
<xp:div id="newsContent" style="display:none">
  <xp:this.value><![CDATA[#{javascript:utilityBean.readLatestNews()}]]></xp:this.value>
</xp:div>

<xp:scriptBlock>
  <xp:this.value><![CDATA[
    // 客户端读取DOM内容
    var news_message = document.getElementById("#{id:newsContent}").innerHTML;
    var news_location = '#{javascript:@JavaScriptEncode(sessionScope.get("location"))}';
    var news_title = '#{javascript:@JavaScriptEncode(sessionScope.get("title"))}';
  ]]></xp:this.value>
</xp:scriptBlock>

2. 用JSON格式传递完整数据 #

服务端将数据序列化为JSON字符串，客户端直接解析JSON对象，这种方式能安全处理所有特殊字符：

<xp:scriptBlock>
  <xp:this.value><![CDATA[
    // 服务端生成JSON字符串（自动完成特殊字符转义）
    var newsData = #{javascript:
      var data = new java.util.HashMap();
      data.put("message", utilityBean.readLatestNews());
      data.put("location", sessionScope.get("location"));
      data.put("title", sessionScope.get("title"));
      com.ibm.commons.util.io.json.JsonGenerator.toJson(data);
    };
    // 客户端直接访问JSON对象属性
    console.log(newsData.message);
  ]]></xp:this.value>
</xp:scriptBlock>

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