眼见不一定为实！记一次JS字符串查找过程中遇到的让人怀疑人生的Bug的修复过程

1.浏览器坏了还是我的眼睛出问题了？开始怀疑人生。。。

首先，说一下发生问题的代码的场景，本来我是在写油猴脚本，不懂的可以百度一下，油猴脚本大体的用途就是可以让你在任何网站插入自己的JS代码并执行。

目标网站有一个很长的列表，我在目标网站插入自己的代码，代码的功能是添加一个按钮，按钮点击的时候 根据一个关键词数组在每个列表项里去查询是否包含可能的关键词。有几个列表项内容里包含了以下内容：

于是我想把以上2项内容 归类到一起 我使用了关键词 FCT 去查询所有列表项，结果代码没有查询到。返回一个空数组。着实让我很意外，因为我的代码是可以查询到别的关键词的，所以我没有怀疑是查询代码的问题。我觉得可能是 FCT 这个查询字符串的问题，于是 我重新刷新页面，等全部列表项加载完毕之后，我使用Chrome浏览器自带的查询功能（Ctrl+F）输入 FCT 字符串，更奇怪的事情发生了 ，Chrome也没有查询到相关的关键词。（不信的可以使用浏览器的查找功能看看能不能定位到这个 FCΤ） 我就纳闷了，我明明看见页面有好几个 FCT 为什么 浏览器说没有找到呢？？？我不解，我困惑。。。

2.根据经验进行初步的Bug分析

这时候，我以往的丰富的踩坑经验告诉我，页面显示的实际内容 可能跟我使用肉眼看到的内容 不一样。。那怎么验证呢？？

当你不确定页面显示的字符是什么的时候，或者不知道怎样使用输入法打出那个字符的时候，有一个简单的小技巧，那就是使用复制功能。这个小技巧经常使用在设置一些软件的特殊昵称的时候派上用场，比如你想在自己的昵称里加上 π  或者 ☺  这时候 靠拼音 你是不能打印出这些字符的，这时候 你就可以使用 输入法的特殊符号也行 ，百度相关页面 然后去页面复制这些符号也行。然后就可以粘贴到你需要设置特殊昵称的软件里面了。

言归正传，我使用上面的 FCT 去搜索查询列表项，结果没有找到，那么有一种可能性：页面显示的肉眼看起来像是 FCT 但是实际上可能不是 英文字母的 FCT ，那我们怎么验证呢？

有些朋友应该已经想到了，我们可以使用上面的复制的方法，这时候我打开了Chrome浏览器的开发者工具，然后选中其中一条列表项，在控制台测试了以下代码，先给你们看一下结果，看看有人能看懂不。

对于不熟悉前端的开发者，我先解释一个东西，上面的$0代表我选中的那个HTML元素

我来逐条解释一下 每行代码执行时的环境和意思

1.输出HTML元素包含的文本内容，就是页面看到的内容，这里很清楚的能看到 内容 包含 FCT 

2.我在HTML文本内容里查询 FCT ，这个字符串是我手动输入的，执行结果false表明 没有查询到，虽然上面代码的执行结果里 看着 明明有一个 FCT。。。

3.这个结果就神奇了 ，这个结果是true 标明查询到了，为什么这个看起来和 上面 第二部的 一模一样，执行结果却不一样呢，这个跟第二部手动输入的 FCT 不同的是  这个是我 通过切换到 element面板 使用右键复制出来的内容，并不是手动输入的三个字母，结果就是true了。。。

这时候我拿出了文件比较的神器---Compare

新建2个文本文件：

1.TXT 手动输入 FCT 三个字母
2.TXT 通过element面板复制得到长得像FCT的三个字符

然后进行比对，一比对，果然结果表明两者不一样。。

记事本打开，两个文件看起来都像是 FCT 但是在Compare里 却变成了上图。

虽然不清楚为什么 T 变成了 韦  ，但是至少说明两个文件的内容 是不一样的。

这里基本上可以断定 页面显示的内容 和 我手动 输入的 FCT 三个字母是 不一样的。

肉眼看起来是一样的内容，实际上 是不一样的！

这里，我要插入一个很宝贵的经验：做开发，要使用工具去比较文件是否一样，不要肉眼比较！

3.深入分析和定位出现Bug的原因

上面我们已经知道，页面的显示内容肉眼看起来像是 英文字母 FCT，但是实际上不是，下一步我们就要断定，到底问题出在哪个字母上面，或者页面显示的内容到底是什么？？

这时候我又拿出来了控制台 然后测试代码  具体请看以下截图：

由上面的截图的执行结果可以看到，在页面内容里能查询到F、FC，但是查不到FCT，由此可以断定 问题出在 字母  T 上面，现在还不知道这个长得像T的字母到底是什么。

真的万万没想到，万万没想到啊，一大群英文字母里混入了一个长得像英文字母，但是实际上不是英文字母的字符。。。

这时候，我们百度 “像T的字母”，搜索结果前几项就能看到一个 希腊字母里 有一个像 T的字母，

还能看到怎样输出这个字符：点输入法栏--菜单--软键盘--希腊字母

这时候我还是在控制台测试代码 先写上FC然后使用上面的方法输入这个T 然后发现果然查询结果是true 标明 这个字符就是希腊字符。。。我们上面不是说 Chrome浏览器自带的查找 也没找到吗，现在还是使用同样的方法去Chrome的查找框里输入，发现 FCT内容也能查询到了。。。

至此此次神奇Bug的分析已经完成。

4.解决Bug之后的问题思考和扩展

后来过了几分钟，我脑子中突然闪现，这个可以当成一道装逼的面试题啊，请看下面的表达式执行结果，问：为什么是false。

后来，想了想，还是不够迷惑人，只有一个字符 容易被识破，得加一些干扰字符，于是就是优化改造得到了下面的表达式：

这个表达式 能够唬住很多人吧，哈哈。原因有2个：

1.比较的字母是多个，增加找出出问题的那个字母的难度
2.JS里有 true，而此处是 True 多多少少会给回答问题的人增加一些分析问题时候的干扰

哈哈，觉得今天的这个Bug，挺有意思的，所以在此记录一下。也希望能给以后遇到类似问题的兄弟们一点提示和帮助吧。

 

最后，再说一遍：做开发，比较内容一定要使用工具！不要肉眼比较！！！