长标题显示字数处理

很多情况下，我们需要控制长标题的显示字数。在客户端用JavaScript控制显示最大字数后，由于js把任何字符都当作1个长度来处理，由此导致全角和半角字符显示的实际长度不同。

例如我们设置某个文章列表页面所有的文章标题最长显示10个字符。那么如下的题目：

这篇文章是测试标题长度显示的文章

I love my country.I love all of you.

处理后，将分别显示为：

这篇文章是测试标题长

I love my (注意最后还有一个空格)

假设我们是按照中文的宽度来确定10个字符这个标准的，那么当标题是英文等半角字符时，显然太短了。反过来，如果我们按照英文等半角字符来确定显示字符数量标准，那么如果题目是中文的时候，又很容易出现自动换行等我们不希望出现的结果。

本文尝试以一种笨拙的办法处理这个问题。即使用js检查字符串中的每一个字符，如果发现有两个(注意不一定相连)的半角字符，那么就将显示长度标准加1。

 1     /**
 2         获取最终显示的字符串
 3 
 4         @param str 要显示的完整字符串
 5         @param baseLength 全是全角字符情况下的显示长度
 6     */
 7     function getShowStr(str,baseLength)
 8     {
 9         return str.substring(0,getShowLength(str,baseLength));
10     }
11     /**
12         计算最终显示长度
13 
14         @param str 要显示的完整字符串
15         @param baseLength 全是全角字符情况下的显示长度
16     */
17     function getShowLength(str,baseLength)
18     {
19         var i;
20         var result;
21         var state = false; //这个做一个状态标志，实现每出现2个半角字符，让显示长度加1
22 
23         result = baseLength;
24 
25         for(i = 0 ;i < str.length;i++)
26         {
27             if(i==baseLength-1)break;
28 
29             if((str.charAt(i) >= 'a' && str.charAt(i) <= 'z')
30                 ||(str.charAt(i) >= 'A' && str.charAt(i) <= 'Z')
31                 ||(str.charAt(i) >= '0' && str.charAt(i) <= '9')
32                 ||count(str.charAt(i)))
33             {
34                 if(state)
35                 {
36                     state = false;
37                     result ++;
38                 }
39                 else
40                     state = true;
41             }
42         }
43 
44         return result;
45     }
46 
47     /**
48         判断一个字符是否是如下半角符号
49 
50         最笨的就是这里。而且应该不全，我是从键盘上一个一个键按过来的。呵呵
51 
52         @param c 要检测的字符
53     */
54     function count(c)
55     {
56         if (c == '`'
57           ||c == '!'
58           ||c == '@'
59           ||c == '#'
60           ||c == '$'
61           ||c == '%'
62           ||c == '^'
63           ||c == '&'
64           ||c == '*'
65           ||c == '('
66           ||c == ')'
67           ||c == '_'
68           ||c == '-'
69           ||c == '+'
70           ||c == '='
71           ||c == '['
72           ||c == '{'
73           ||c == ']'
74           ||c == '}'
75           ||c == '\\'
76           ||c == '|'
77           ||c == ';'
78           ||c == ':'
79           ||c == '"'
80           ||c == '\''
81           ||c == '<'
82           ||c == ','
83           ||c == '>'
84           ||c == '.'
85           ||c == '?'
86           ||c == '/'
87           ||c == ' ')
88             return true;
89         else
90             return false;
91     }

经过如上处理，上面例子中说的两个标题会显示为：

这篇文章是测试标题长

I love my country.I love all

显然效果要比原来的样子好。

局限：应该并不是所有的情况下都是两个半角字符的宽度大约与一个全角字符的宽度相当，所以预想中使用某些字体、字符的时候依然会出现换行问题。另外上面的函数进检测原有字符串中从开始到标准长度个字符处的字符情况，之后的字符不检测，且由于前面的半角字符而使标准加大从而新加入进来的要显示的字符也不再检测范围之内。综上，所以这只是个很粗略的处理。

关于改进：最后一个函数的确太笨了，一大堆的或，而且不一定或的完整。这里应该可以做一些改进吧。程序写法上例如把所有的这些符号写成一个数组然后循环比较这样的就不说了，主要是是否这些东西也可以按照数字和字母的方式来比较之类的。