快捷導(dǎo)航

PHP實(shí)現(xiàn)HTML標(biāo)簽自動(dòng)補(bǔ)全代碼

更新時(shí)間：2012年10月04日 18:32:17 作者：

開發(fā)各種項(xiàng)目中經(jīng)常遇到截取html字符串問(wèn)題。比如博客文章列表頁(yè)面截取一部分正文、文章正文翻頁(yè)截取等

一般情況下先用PHP的 strip_tags 函數(shù)去掉所有html標(biāo)簽，再去掉空格等，然后再用substr或者自己實(shí)現(xiàn)的cn_substr函數(shù)來(lái)實(shí)現(xiàn)截取。因?yàn)槿绻幌热サ鬶tml標(biāo)簽，直接截取出來(lái)的字符串就會(huì)有沒(méi)有閉合的標(biāo)簽出現(xiàn)，有時(shí)甚至?xí)厝≡跇?biāo)簽上面比如

復(fù)制代碼代碼如下:

</di ...

今天遇到一個(gè)內(nèi)容翻頁(yè)截取問(wèn)題：正文是用富文本編輯器寫入的，編輯器上有個(gè)分頁(yè)按鈕，點(diǎn)擊之后就往當(dāng)前光標(biāo)位置插入一個(gè)藍(lán)色的

復(fù)制代碼代碼如下:

<hr />

橫線。然后php直接存入數(shù)據(jù)庫(kù)。顯示的時(shí)候，用 explode 函數(shù)根據(jù)這個(gè)

復(fù)制代碼代碼如下:

<hr />

標(biāo)記來(lái)分成一個(gè)數(shù)組，然后根據(jù)當(dāng)前頁(yè)碼來(lái)顯示某個(gè)片段。但是有個(gè)嚴(yán)重的問(wèn)題，比如富文本編輯器寫入：

復(fù)制代碼代碼如下:

 
<div style="text-align:center"> 
content of page 1 
<hr /> 
page 2 content 
</div> 

如果用explode函數(shù)分開后，
第一頁(yè)的內(nèi)容是

復(fù)制代碼代碼如下:

content of page 1
第二頁(yè)的內(nèi)容是：

復(fù)制代碼代碼如下:

 
page 2 content 
</div> 

這樣就產(chǎn)生了沒(méi)有閉合的標(biāo)簽，直接顯示到頁(yè)面上面就會(huì)破壞頁(yè)面布局。。。
想了很久，也找了網(wǎng)上很多 closetag函數(shù)。但是發(fā)現(xiàn)都針對(duì)第一頁(yè)那種沒(méi)有閉合的標(biāo)簽的閉合。對(duì)于第二種沒(méi)有開頭的標(biāo)簽就沒(méi)辦法了。

針對(duì)第一頁(yè)那種沒(méi)有閉合的標(biāo)簽的閉合的closetags方法是：

復(fù)制代碼代碼如下:

 
function closetags($html) { 
// 不需要補(bǔ)全的標(biāo)簽 
$arr_single_tags = array('meta', 'img', 'br', 'link', 'area'); 
// 匹配開始標(biāo)簽 
preg_match_all('#<([a-z]+)(?: .*)?(?<![/|/ ])>#iU', $html, $result); 
$openedtags = $result[1]; 
// 匹配關(guān)閉標(biāo)簽 
preg_match_all('#</([a-z]+)>#iU', $html, $result); 
$closedtags = $result[1]; 
// 計(jì)算關(guān)閉開啟標(biāo)簽數(shù)量，如果相同就返回html數(shù)據(jù) 
$len_opened = count($openedtags); 
if (count($closedtags) == $len_opened) { 
return $html; 
} 
// 把排序數(shù)組，將最后一個(gè)開啟的標(biāo)簽放在最前面 
$openedtags = array_reverse($openedtags); 
// 遍歷開啟標(biāo)簽數(shù)組 
for ($i = 0; $i < $len_opened; $i++) { 
// 如果需要補(bǔ)全的標(biāo)簽 
if (!in_array($openedtags[$i], $arr_single_tags)) { 
// 如果這個(gè)標(biāo)簽不在關(guān)閉的標(biāo)簽中 
if (!in_array($openedtags[$i], $closedtags)) { 
// 直接補(bǔ)全閉合標(biāo)簽 
$html .= '</' . $openedtags[$i] . '>'; 
} else { 
unset($closedtags[array_search($openedtags[$i], $closedtags)]); 
} 
} 
} 
return $html; 
} 

后來(lái)想了一個(gè)辦法，利用瀏覽器自己的html解釋引擎來(lái)幫助補(bǔ)全有問(wèn)題的html片段。具體做法如下：

復(fù)制代碼代碼如下:

 
<script> 
var div = document.createElement('div'); 
div.innerHTML ='<?php echo ("<div>這里是被截取的html片段");?>'; 
document.write(div.innerHTML); 
</script> 

原理就是先把html片段寫入到一個(gè)空的div里面，然后再?gòu)倪@個(gè)div里面讀取出來(lái)。別看寫入和讀取的屬性都是innerHTML，寫入的內(nèi)容和得到的內(nèi)容是不一樣的噢。如果寫入不完整的html片段，瀏覽器會(huì)自動(dòng)補(bǔ)全修正。讀取出來(lái)的時(shí)候就已經(jīng)是完整的html dom 片段了。
可是這樣有個(gè)弊端，由于是Js加載內(nèi)容信息的，會(huì)對(duì)搜索引擎優(yōu)化不好。

您可能感興趣的文章: