js方法参数中含有单引号双引号的处理
最近在做项目时,遇到一个问题。当在js脚本中,拼接生成一个tr,然后添加到一个表格里。
//假定testval是从后台传过来的数据 var testval = "含有'半角单引号的字符串"; //向表格中添加行数据 function BindTable() { var trval = "<tr><td><a href = '#' onclick =\"BindText('" + testval + "')\">测试</a></td></tr>"; $("#EscapeTable").append(trval); } //向某文本框显示当前选中行的数据 function BindText(textval) { document.getElementById("Text1").value = textval; }
当执行BindTable(),向表格EscapeTable添加上这一行数据后,单击超连接"测试"时,没有执行BindText()方法。
此时感觉很奇怪,为什么单击"测试",没有执行BindText()方法。经过调试发现,原来此testval值有特殊的地方,就是含有单引号。于是把单引号去掉后,就可以正常执行BindText()方法。
那么为什么有单引号,就不执行BindText()方法呢?原因是:如果含有半角单引号(全角没有问题)的字符串,作为BindText()的参数,那么
此行代码
var trval = "<tr><td><a href = '#' onclick =\"BindText('" + EscapeChar(testval) + "')\">测试</a></td></tr>";
生成的html代码就是
<tr><td><a href = '#' onclick ="BindText('含有'半角单引号的字符串')">测试</a></td></tr>
此时生成的BindText参数的格式是不正确的。
找到问题就好解决了,于是写了一个方法,把testval中的单引号,进行转义
//向表格中添加行数据 function BindTable() { var trval = "<tr><td><a href = '#' onclick =\"BindText('" + EscapeChar(testval) + "')\">测试</a></td></tr>"; $("#EscapeTable").append(trval); } //向某文本框显示当前选中行的数据 function BindText(textval) { document.getElementById("Text1").value = textval; } //转换方法 function EscapeChar(HaveSpecialval) { //转换半角单引号 HaveSpecialval = HaveSpecialval.replace(/\'/g, "\\\'"); //也可以使用´ HaveSpecialval = HaveSpecialval.replace(/\'/g, "´"); return HaveSpecialval; }
如果参数中含有半角双引号时,也可以使用转义的方法处理,但是不能使用下面这种方式
//转换半角双引号 HaveSpecialval = HaveSpecialval.replace(/\'/g, "\\\"");
\"是javascript的转义格式,html语言无法对\"进行解析,此时要使用html的转义字符&"或者"
HaveSpecialval = HaveSpecialval.replace(/\"/g, """);
HaveSpecialval = HaveSpecialval.replace(/\"/g, """);
html转义字符要以&开头 ;结尾 中间不能有空格;