从JSTL向JavaScript函数传递含单双引号的参数问题

我懂你现在卡在哪了——从数据库取的字符串里既有单引号又有双引号，直接传到JS函数里就把onclick的语法搞崩了，之前只替换单引号确实不够，咱们一步步解决这个问题：

问题根源 #

你生成的HTML里，onclick属性是用双引号包裹的（比如onclick="return showPopup(...)"）。当参数里出现双引号（像ANOTHER " company"这种），这个双引号会直接闭合onclick的属性值，剩下的company"就变成了无效的HTML代码，自然导致JS函数调用失败。之前只处理单引号，完全没考虑双引号对HTML属性的影响。

两种解决方案 #

方案一：增强版JSTL替换（无需额外依赖） #

咱们要做双重转义：既要处理JS字符串里的单引号，也要处理HTML属性里的双引号。用嵌套的fn:replace就能实现：

<a href="javascript:void(0);" onclick="return showPopUp(
    '${fn:replace(fn:replace(account.fName, '\u0022', '&quot;'), '\'', '\\\'')}',
    '${fn:replace(fn:replace(account.lName, '\u0022', '&quot;'), '\'', '\\\'')}',
    '${fn:replace(fn:replace(account.compName, '\u0022', '&quot;'), '\'', '\\\'')}',
    '${fn:replace(fn:replace(account.firstTimePin, '\u0022', '&quot;'), '\'', '\\\'')}',
    '${fn:replace(fn:replace(account.email, '\u0022', '&quot;'), '\'', '\\\'')}'
);return false;"> </a>

这里的细节要注意：

• '\u0022'是EL表达式里表示双引号的安全写法，避免和JSP页面的属性双引号冲突
• 第一步把双引号替换成HTML实体"，这样在HTML的onclick属性里，双引号不会提前闭合属性值
• 第二步把单引号替换成\\\'：第一个反斜杠是JSP的转义，第二个是JS的转义，最终生成的JS代码里会变成\'，正确转义单引号

方案二：JSON序列化（更稳妥，推荐） #

JSON的字符串转义规则和JS完全兼容，能处理所有特殊字符（包括换行、制表符等），比手动替换靠谱太多。

方法1：用EL函数（需引入JSON库）

如果项目里有Jackson或Gson这类JSON库，可以自定义一个EL函数来序列化字符串。比如用Jackson的话，JSP代码可以写成：

<a href="javascript:void(0);" onclick="return showPopUp(
    ${json:serialize(account.fName)},
    ${json:serialize(account.lName)},
    ${json:serialize(account.compName)},
    ${json:serialize(account.firstTimePin)},
    ${json:serialize(account.email)}
);return false;"> </a>

序列化后的字符串会自动带上双引号，并且转义所有特殊字符（比如ANOTHER "company"会变成"ANOTHER \"company\""），直接作为JS参数完全合法，不需要自己加单引号。

方法2：后台提前序列化

如果不想搞EL函数，也可以在Java后台把字符串转成JSON格式，放到request属性里：

// 用Jackson的ObjectMapper举例
ObjectMapper mapper = new ObjectMapper();
request.setAttribute("fNameJson", mapper.writeValueAsString(account.getFName()));
request.setAttribute("lNameJson", mapper.writeValueAsString(account.getLName()));
request.setAttribute("compNameJson", mapper.writeValueAsString(account.getCompName()));
request.setAttribute("firstTimePinJson", mapper.writeValueAsString(account.getFirstTimePin()));
request.setAttribute("emailJson", mapper.writeValueAsString(account.getEmail()));

然后在JSP里直接使用：

<a href="javascript:void(0);" onclick="return showPopUp(
    ${fNameJson},
    ${lNameJson},
    ${compNameJson},
    ${firstTimePinJson},
    ${emailJson}
);return false;"> </a>

这样生成的JS代码绝对合法，再也不用担心引号的问题了。

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