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, "\\\'");

            //也可以使用&acute;
            HaveSpecialval = HaveSpecialval.replace(/\'/g, "&acute;");
            return HaveSpecialval;
        }

如果参数中含有半角双引号时,也可以使用转义的方法处理,但是不能使用下面这种方式

//转换半角双引号
            HaveSpecialval = HaveSpecialval.replace(/\'/g, "\\\"");

 \"是javascript的转义格式,html语言无法对\"进行解析,此时要使用html的转义字符&&quot;或者&#34;

            HaveSpecialval = HaveSpecialval.replace(/\"/g, "&quot;");

            HaveSpecialval = HaveSpecialval.replace(/\"/g, "&#34;");

html转义字符要以&开头 ;结尾 中间不能有空格;

 

 

  

posted @ 2012-11-04 18:06  百黎  阅读(12378)  评论(0编辑  收藏  举报