修复ichord/At.js插件的中文不支持问题

date: 2016-02-18 15:02:27

description：

  1. if i input “#12”, can match to “12中国”
    /images/4.png
  2. if i input “#12中”, can not match to “12中国”
    /images/5.png
  3. if i input “#中”, can match to “12中国”
    /images/6.png

问题描述：
at.js插件使用非常方便，但我发现当输入中文时，却无法匹配到结果，问题如下：
1.输入“#12”能匹配到“12中国”，如图：
/images/4.png
2.继续输入“#12中”，却无法匹配到“12中国”，如图：
/images/5.png
3.如果我在一开始就输入“#中”，则能匹配到“12中国”，如图：
/images/6.png

解决方案：
通过阅读源码发现，在jquery.atwho.js文件中有一个DEFAULT_CALLBACKS方法，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
    var _a, _y, match, regexp, space;
    flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    if (should_startWithSpace) {
      flag = '(?:^|\\s)' + flag;
    }
    _a = decodeURI("%C3%80");
    _y = decodeURI("%C3%BF");
    space = acceptSpaceBar ? "\ " : "";
    regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
    match = regexp.exec(subtext);
    if (match) {
      return match[2] || match[1];
    } else {
      return null;
    }
  },

问题出在这段正则匹配里

1
regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');

不难发现，匹配规则里缺少了对中文的支持。找到问题后，解决就容易了，只要修改这段匹配规则就ok了。

1
regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9\u4e00-\u9fa5_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');

测试：
输入“#12中”，能匹配到“12中国”，如图：
/images/7.png