很多情況下，我們需要控制長標(biāo)題的顯示字?jǐn)?shù)。在客戶端用JavaScript控制顯示最大字?jǐn)?shù)后，由于js把任何字符都當(dāng)作1個長度來處理，由此導(dǎo)致全角和半角字符顯示的實(shí)際長度不同。

例如我們設(shè)置某個文章列表頁面所有的文章標(biāo)題最長顯示10個字符。那么如下的題目：

這篇文章是測試標(biāo)題長度顯示的文章

I love my country.I love all of you.

處理后，將分別顯示為：

這篇文章是測試標(biāo)題長

I love my (注意最后還有一個空格)

假設(shè)我們是按照中文的寬度來確定10個字符這個標(biāo)準(zhǔn)的，那么當(dāng)標(biāo)題是英文等半角字符時，顯然太短了。反過來，如果我們按照英文等半角字符來確定顯示字符數(shù)量標(biāo)準(zhǔn)，那么如果題目是中文的時候，又很容易出現(xiàn)自動換行等我們不希望出現(xiàn)的結(jié)果。

本文嘗試以一種笨拙的辦法處理這個問題。即使用js檢查字符串中的每一個字符，如果發(fā)現(xiàn)有兩個(注意不一定相連)的半角字符，那么就將顯示長度標(biāo)準(zhǔn)加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;?//這個做一個狀態(tài)標(biāo)志，實(shí)現(xiàn)每出現(xiàn)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?????????最笨的就是這里。而且應(yīng)該不全，我是從鍵盤上一個一個鍵按過來的。呵呵
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?????}


經(jīng)過如上處理，上面例子中說的兩個標(biāo)題會顯示為：

這篇文章是測試標(biāo)題長

I love my country.I love all

顯然效果要比原來的樣子好。

局限：應(yīng)該并不是所有的情況下都是兩個半角字符的寬度大約與一個全角字符的寬度相當(dāng)，所以預(yù)想中使用某些字體、字符的時候依然會出現(xiàn)換行問題。另外上面的函數(shù)進(jìn)檢測原有字符串中從開始到標(biāo)準(zhǔn)長度個字符處的字符情況，之后的字符不檢測，且由于前面的半角字符而使標(biāo)準(zhǔn)加大從而新加入進(jìn)來的要顯示的字符也不再檢測范圍之內(nèi)。綜上，所以這只是個很粗略的處理。

關(guān)于改進(jìn)：最后一個函數(shù)的確太笨了，一大堆的或，而且不一定或的完整。這里應(yīng)該可以做一些改進(jìn)吧。程序?qū)懛ㄉ侠绨阉械倪@些符號寫成一個數(shù)組然后循環(huán)比較這樣的就不說了，主要是是否這些東西也可以按照數(shù)字和字母的方式來比較之類的。