QQ用户昵称显示出现脚本错误的原因定位

一，现象描述

      通过后台php生成json数据，前台通过异步调用该php把用户的qq号码和昵称显示出来。但在测试的过程中，我们发现了有部分用户的拉取出现脚本错误，凭经验判断，应该是用户的昵称包含有特殊的字符导致js脚本截断的原因。

 

二，原因分析

     把几个出现问题的qq号码挑出来后，进行逐个测试，我们发现其中一个导致错误的qq号码的用户昵称是：y'#$&哈<*]^@，这里面包含了许多火星文，发现里面包含有单引号和双引号，而后台php却没有对这两个进行过虑，导致生成的json数据被割断，重新调用了php的编码函数htmlspecialchars()进行过虑，只不过这次对第二个参数传入了ENT_QUOTES，表示对单引号和双引号进行html编码。

   修改后，发现脚本错误的问题已经解决，但另外一个问题出现了，调用js的替换函数，str.replace(reg,str);替换昵称模板，如下所示

     var htmlStr = tpl.replace(/<%=@nick%>/g,nick);其中nick为昵称的字符串值，

经过替换后，我们发现替换后的htmlStr后不是昵称的值：y'#$&哈<*]^@，而变成了y'#<%=@nick%>哈<*]^@，奇怪，难道是模板跟对应的正则表达式不一致导致无法替换后，仔细检查过发现，模板跟正则表达式是一样的，但为什么调用replace后始终无法替换到模板的<%=@nick%>，问题肯定出现在nick的值上，我们发现nick包含了正则表达式匹配变量：$&，这两个出现在nick里面，已经表示不是普通的字符替换了，而是被认为是：指定与整个模式匹配的 stringObj 的部分，也就是模板里面的<%=@nick%>，这样替换后出现这个问题就不足为怪了。

 

三，解决方法

      现在的问题已经很明显，那就是因为用户昵称由于是用户自己输入的，存在各个可能性的字符，而使用js里面的str.replace直接用字符进行替换是存在潜在问题的，搜索了js的使用API说明如下：

replace 方法
返回根据正则表达式进行文字替换后的字符串的复制。
stringObj.replace(rgExp, replaceText)
参数
stringObj
必选项。要执行该替换的 String 对象或字符串文字。该字符串不会被 replace 方法修改。
rgExp
必选项。为包含正则表达式模式或可用标志的正则表达式对象。也可以是 String 对象或文字。如果 rgExp 不是正则表达式对象，它将被转换为字符串，并进行精确的查找；不要尝试将字符串转化为正则表达式。
replaceText
必选项。是一个String 对象或字符串文字，对于stringObj 中每个匹配 rgExp 中的位置都用该对象所包含的文字加以替换。在 Jscript 5.5 或更新版本中，replaceText 参数也可以是返回替换文本的函数。
说明
replace 方法的结果是一个完成了指定替换的 stringObj 对象的复制。
下面任意的匹配变量都能用来识别最新的匹配以及找出匹配的字符串。在需要动态决定替换字符串的文本替换中可以使用匹配变量。
字符 含义
$$ $ （JScript 5.5 或更新版本）
$& 指定与整个模式匹配的 stringObj 的部分。 （JScript 5.5 或更新版本）
$` 指定由 $& 描述的匹配之前的 stringObj 部分。 （JScript 5.5 或更新版本）
$' 指定由 $& 描述的匹配之后的 stringObj 部分。 （JScript 5.5 或更新版本）
$n 捕获的第 n 个子匹配，此处 n 为从1到9的十进制一位数。 （JScript 5.5 或更新版本）
$nn 捕获的第 nn 个子匹配，此处 nn 为从01到99的十进制两位数。 （JScript 5.5 或更新版本）
如果 replaceText 为函数，对于每一个匹配的子字符串，调用该函数时带有下面的 m+3 个参数，此处 m 是在 rgExp 中捕获的左括弧的个数。第一个参数是匹配的子字符串。接下来的 m 个参数是查找中捕获的全部结果。第 m+2 个参数是在 stringObj 中匹配出现的偏移量，而第 m+3 个参数为 stringObj。结果为将每一匹配的子字符串替换为函数调用的相应返回值的字符串值。
Replace 方法更新全局 RegExp 对象的属性。

 

    这里发现replace支持回调函数的方式，于是我们改成下面的调用方式：

var htmlStr = tpl.replace(/<%=@nick%>/g,function(){return nick;});其中nick为昵称的字符串值，表示对得到的匹配使用nick进行替换，跟之前的区别在于可能nick存在匹配关键字的问题，导致匹配和替换无法得到我们想要的效果。

经过测试，正常！