昆仑的山头

很多时候，我们需要判断一个字符串扔到页面上显示时的宽度，这里，按照我自己的认知顺序说一下都有哪些判断方法

初级：str.length
这个不用说，大家都明白，最简单，也最不靠谱
但是有一个地方要注意：一个中文字符，js里的length是1，而php里，根据编码不同，可以是3或2

中级：正则判断支付类型，按不同的长度处理

1
2
3
4
5
6
7
8
9
10
11

  //判断字符串的长度，全角返回2，半角返回1
  var b2reg = /[\u0000-\u00ff|\uff61-\uff9f|\uffe8-\uffee]+$/;
  function byteLen(s){
    var c = 0;
    if(s && s.length > 0){
      var a = s.split("");
      for(i in a){
        if(!b2reg.test(a[i])) c += 2;
        else c++;
      }
    }

一般要求不严格的情况，我都是这么处理
但是，这个也不靠谱，中文没问题，但是英文字符的显示宽度，会受字体、浏览器的影响，比如“i”和“w”，很难确定这俩显示宽度是否相同

终结：实际显示宽度
有些复杂，不过思路也很简单：在页面的视口之外，做一个同样的显示区域，字体、样式什么的都一样，然后把文本写进去，再判断宽度；如果过宽，再截
这种方法还有一个经典的应用：输入框跟踪提示。
比如，在一个很大的输入框里，输入多个邮箱地址，要随着用户的输入，在输入点下方位置显示不同邮箱地址的提示，这里的一个难点就是：js里无法获得当前输入点的位置。于是就可以用上面的方法，时时获取显示宽度，然后用复杂的计算近似得到当前输入点的位置…

———
（好久不写技术文章了，一方面是懒，另外很关键的一点是…近半年都在做售货机屏幕的东西，缺少普适性）