需求：將一段文字截取一定的物理長(zhǎng)度顯示，注意，要截取的不是字符串的字節(jié)數(shù)，UFT-8 的編碼中文字符是3個(gè)字節(jié)或者4個(gè)字節(jié)的，而顯示的時(shí)候中文會(huì)占兩個(gè)字符的長(zhǎng)度，英文字符只占一個(gè)，全角的時(shí)候又有不同。而且給的數(shù)據(jù)是HTML代碼串，比如這樣：
<div class=”aaa”><a href=”/aaa.php?id=1″>張三</a> 評(píng)論了 <a href=”/aaa.php?id=444″>李四</a> 分享的 <a href=”bbb.html”>一篇文章文章一長(zhǎng)串的東西</a></div>
截取的時(shí)候是要截取 div 標(biāo)簽內(nèi)部的東西，而且要保留HTML標(biāo)簽，只是對(duì)其中的文字做處理。比如我可能只是截取到“李四”的“李”字，但是如果就這樣放到前端的話，“李四”前面的 a 標(biāo)簽是沒(méi)有閉合的，所以截取之后要保證HTML的語(yǔ)法正確。
這個(gè)問(wèn)題確實(shí)不太好搞，讓我郁悶了兩天。請(qǐng)注意，這只是一個(gè)字符串，只不過(guò)內(nèi)容是HTML代碼，是沒(méi)有什么DOM的。如果是在前端處理就好辦了，直接DOM獲取，然后對(duì)里面的節(jié)點(diǎn)進(jìn)行處理，最后把innerHTML 之類的東西輸出就搞定了。現(xiàn)在可不行了，得換個(gè)思路。同事的思路是這樣的：
遍歷字符串的每一個(gè)字符。設(shè)置一個(gè)標(biāo)記，碰到標(biāo)簽開(kāi)始的標(biāo)記< 就置為1，接下來(lái)的字符都不記數(shù)，然后碰到>之后再開(kāi)始計(jì)數(shù)。對(duì)標(biāo)簽內(nèi)部的字符串處理的時(shí)候，還要先判斷當(dāng)前字符的編碼是不是可能是中文，一般來(lái)說(shuō)PHP中 UTF-8 編碼的中文字符的長(zhǎng)度都是3，所以如果碰到是中文字符編碼，就要跳過(guò)兩個(gè)不記數(shù)……說(shuō)到這里我自己頭已經(jīng)開(kāi)始大了。個(gè)人認(rèn)為這種方法很不爽，首先這種精致的邏輯不太容易控制，而且 UFT-8 編碼下中文產(chǎn)生的長(zhǎng)度有可能是3個(gè)或4個(gè) 所以代碼的嚴(yán)密性值得懷疑。
我個(gè)人的思路是，用 Tidy 來(lái)搞（具體用法請(qǐng)看PHP手冊(cè)吧）。昨天研究了一下那個(gè) Tidy ，發(fā)現(xiàn)這個(gè)東西還是挺好用的。首先，把這個(gè)字符串轉(zhuǎn)換成 Tidy 對(duì)象，這樣：
$tidy = tidy_parse_string($str, array(), ‘utf8′); // 最后一個(gè)是設(shè)置編碼的，注意，這里是utf8 ，不是utf-8，沒(méi)有中間那個(gè)連線。
然后獲取$tidy中的 body（因?yàn)檗D(zhuǎn)換之后$tidy會(huì)自動(dòng)加上<head><body>等標(biāo)簽）：
$body = tidy_get_body($tidy);
這個(gè)時(shí)候你可以用 var_dump 看一些 $body 的結(jié)構(gòu)，會(huì)發(fā)現(xiàn)它把每個(gè)標(biāo)簽都變成了一個(gè)對(duì)應(yīng)的對(duì)象，里面有相應(yīng)的屬性。舉例來(lái)說(shuō)，比如 <a href=”#”>sdf</a> ，這么一條語(yǔ)句對(duì)應(yīng)的一些屬性有：
name=>”a”
value => “<a href=”#”>sdf</a>”
child=> array{[0]=>一個(gè)文本節(jié)點(diǎn)對(duì)象，value是 sdf}
attribute=array{”href”=>”#”}
…..其他屬性
可以看到，我們其實(shí)是可以單獨(dú)去處理 a 標(biāo)簽對(duì)應(yīng)節(jié)點(diǎn)下面的文字節(jié)點(diǎn)的值的，那樣就不會(huì)破壞任何HTML完整性。原來(lái)我以為改變 a 標(biāo)簽中文字節(jié)點(diǎn)的值之后， a 標(biāo)簽的value也會(huì)跟著改變，那樣我直接返回a標(biāo)簽對(duì)應(yīng)節(jié)點(diǎn)的value就OK了，沒(méi)想到不是那個(gè)樣子，哎，所以處理過(guò)其中的文字之后還是要自己拼出新的HTML。
知道了Tidy對(duì)象的結(jié)構(gòu)之后，一切就好辦了，只要遍歷所有的節(jié)點(diǎn)，對(duì)于本需求來(lái)說(shuō)，就是找到那個(gè) div 標(biāo)簽，然后開(kāi)始處理里面的節(jié)點(diǎn)。代碼如下：
if(mb_strwidth($subchild->value, ‘utf-8′) >= $len)
{
$subchild->value = mb_strimwidth($subchild->value, 0, $len, ‘…’, ‘utf-8′);
$trimed_str .= $subchild->value;
break;
}
else
{
$trimed_str .= $subchild->value;
$len = $len - mb_strwidth($subchild->value, ‘utf-8′);
}
里面的$subchild 就是一個(gè)子節(jié)點(diǎn)。注意，這里使用了 mb_strwidth 來(lái)獲取字符串長(zhǎng)度。嚴(yán)重推薦一下這個(gè) mb_strwidth，很好用，它會(huì)把中文當(dāng)作兩個(gè)字符長(zhǎng)度處理，正好符合這里的需求！而且截取字符串的時(shí)候用到了 mb_strimwidth，這個(gè)函數(shù)也會(huì)把中文當(dāng)作兩個(gè)字符長(zhǎng)度處理，mb_ 開(kāi)頭的函數(shù)真是好用啊。
具體代碼我就不寫(xiě)出來(lái)了，因?yàn)槭轻槍?duì)一個(gè)需求寫(xiě)的，沒(méi)做成通用的形式。哪天我有時(shí)間做成通用的再發(fā)布一下。
另外，可惜FireFox不支持 text-overflow 屬性，不然也不用后臺(tái)那么辛苦地去截?cái)嗔恕Ｈ绻蠹矣懈玫姆椒ǎ瑲g迎提出！不勝感激。
新聞熱點(diǎn)
疑難解答
