javascript 文章截取部分無損html顯示實(shí)現(xiàn)代碼
更新時間:2010年05月04日 17:09:02 作者:
近在做一些內(nèi)容搜索的工作,搜索出來的內(nèi)容為html格式,列表部分需要顯示每項(xiàng)內(nèi)容的一部分。
因?yàn)槭莌tml格式的內(nèi)容,直接截取內(nèi)容的前多少字符顯然不合適了。而如果直接去掉所有html格式然后再截取又無法達(dá)到想要的效果,再網(wǎng)上搜了一通之后,寫下如下代碼應(yīng)該可以滿足基本的要求了。(js寫的,因?yàn)槿菀渍{(diào)試)
var br = {};
br.spTags = ["img","br","hr"];/*不需要成對出現(xiàn)的標(biāo)記*/
br.contain = function(arr,it){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]==it){
return true;
}
}
return false;
}
br.subArtc = function(article,worldNum){
var result = [];
/*首先截取需要的字串*/
var wcount = 0;
var startTags = [],endTags = [];
var isInTag = false;
for(var i=0,len=article.length;i<len;i++){
var w = article[i];
result.push(w);
if(w=="<"){
isInTag = true;
}
if(!isInTag){
wcount++;
if(wcount==worldNum){
break;
}
}
if(w==">"){
isInTag = false;
}
}
/*對字串進(jìn)行處理*/
var j=0;
isInTag = false;
var isStartTag = true;
var tagTemp = "";
while(j<i){
w = result[j];
if(isInTag){
if(w==">" || w==" " || w=="/"){
isInTag = false;
if(isStartTag){
startTags.push(tagTemp);
}else{
endTags.push(tagTemp);
}
tagTemp = "";
}
if(isInTag){
tagTemp+=w;
}
}
if(w=="<"){
isInTag = true;
if(result[j+1]=="/"){
isStartTag = false;
j++;
}else{
isStartTag = true;
}
}
j++;
}
/*剔除img,br等不需要成對出現(xiàn)的標(biāo)記*/
var newStartTags = [];
for(var x=0,len=startTags.length;x<len;x++){
if(!br.contain(br.spTags,startTags[x])){
newStartTags.push(startTags[x]);
}
}
/*添加沒有的結(jié)束標(biāo)記*/
var unEndTagsCount = newStartTags.length - endTags.length;
while(unEndTagsCount>0){
result.push("<");
result.push("/")
result.push(newStartTags[unEndTagsCount-1]);
result.push(">");
unEndTagsCount--;
}
return result.join("");
};
基本思路:
1.繞過標(biāo)記,取得實(shí)際內(nèi)容字?jǐn)?shù) ,如需要顯示內(nèi)容前100個字,繞過標(biāo)記檢索,得到第一百個字實(shí)際的索引。然后截取此索引前面的字串。
2.根據(jù)一得到的字串,得到這個字串中存在的開始標(biāo)記和結(jié)束標(biāo)記。注:此處的開始標(biāo)記標(biāo)識以"<"開通,且下一個字符不為"/"。
3.剔除2中 得到的開始標(biāo)記中的不需要成對出現(xiàn)的標(biāo)記。如br,img,hr等。
4.對比經(jīng)過3處理的開始標(biāo)記和2中得到的結(jié)束標(biāo)記,沒有配成對的在合適的位置為其配對。
此功能沒有經(jīng)過嚴(yán)格的測試,大家若有興趣可以可以幫忙測試,有更好的想法的也可以回帖討論。
作者:cnblogs bravfing
復(fù)制代碼 代碼如下:
var br = {};
br.spTags = ["img","br","hr"];/*不需要成對出現(xiàn)的標(biāo)記*/
br.contain = function(arr,it){
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]==it){
return true;
}
}
return false;
}
br.subArtc = function(article,worldNum){
var result = [];
/*首先截取需要的字串*/
var wcount = 0;
var startTags = [],endTags = [];
var isInTag = false;
for(var i=0,len=article.length;i<len;i++){
var w = article[i];
result.push(w);
if(w=="<"){
isInTag = true;
}
if(!isInTag){
wcount++;
if(wcount==worldNum){
break;
}
}
if(w==">"){
isInTag = false;
}
}
/*對字串進(jìn)行處理*/
var j=0;
isInTag = false;
var isStartTag = true;
var tagTemp = "";
while(j<i){
w = result[j];
if(isInTag){
if(w==">" || w==" " || w=="/"){
isInTag = false;
if(isStartTag){
startTags.push(tagTemp);
}else{
endTags.push(tagTemp);
}
tagTemp = "";
}
if(isInTag){
tagTemp+=w;
}
}
if(w=="<"){
isInTag = true;
if(result[j+1]=="/"){
isStartTag = false;
j++;
}else{
isStartTag = true;
}
}
j++;
}
/*剔除img,br等不需要成對出現(xiàn)的標(biāo)記*/
var newStartTags = [];
for(var x=0,len=startTags.length;x<len;x++){
if(!br.contain(br.spTags,startTags[x])){
newStartTags.push(startTags[x]);
}
}
/*添加沒有的結(jié)束標(biāo)記*/
var unEndTagsCount = newStartTags.length - endTags.length;
while(unEndTagsCount>0){
result.push("<");
result.push("/")
result.push(newStartTags[unEndTagsCount-1]);
result.push(">");
unEndTagsCount--;
}
return result.join("");
};
基本思路:
1.繞過標(biāo)記,取得實(shí)際內(nèi)容字?jǐn)?shù) ,如需要顯示內(nèi)容前100個字,繞過標(biāo)記檢索,得到第一百個字實(shí)際的索引。然后截取此索引前面的字串。
2.根據(jù)一得到的字串,得到這個字串中存在的開始標(biāo)記和結(jié)束標(biāo)記。注:此處的開始標(biāo)記標(biāo)識以"<"開通,且下一個字符不為"/"。
3.剔除2中 得到的開始標(biāo)記中的不需要成對出現(xiàn)的標(biāo)記。如br,img,hr等。
4.對比經(jīng)過3處理的開始標(biāo)記和2中得到的結(jié)束標(biāo)記,沒有配成對的在合適的位置為其配對。
此功能沒有經(jīng)過嚴(yán)格的測試,大家若有興趣可以可以幫忙測試,有更好的想法的也可以回帖討論。
作者:cnblogs bravfing
相關(guān)文章
js實(shí)現(xiàn)帶有介紹的Select列表菜單實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)帶有介紹的Select列表菜單,涉及javascript頁面元素的動態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS實(shí)現(xiàn)n秒后自動跳轉(zhuǎn)的兩種方法
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)n秒后自動跳轉(zhuǎn)的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07
Javascript靜態(tài)分頁(多個資料,靜態(tài)自動分頁)
看的處理是個不錯的想法與應(yīng)用大家可以看下。2009-02-02
Three.js中的紋理圖像應(yīng)用和屬性調(diào)整方法
在three.js中紋理貼圖是用來給物體表面添加圖案、顏色或者其他視覺效果的一種技術(shù),這篇文章主要給大家介紹了關(guān)于Three.js中紋理圖像應(yīng)用和屬性調(diào)整的相關(guān)資料,需要的朋友可以參考下2024-01-01
利用js的Node遍歷找到repeater的一個字段實(shí)例介紹
本文教大家使用js的Node遍歷找到repeater的一個字段的具體實(shí)現(xiàn)思路,感興趣的朋友可參考下,希望可以幫助到你2013-04-04
javascript html實(shí)現(xiàn)網(wǎng)頁版日歷代碼
這篇文章主要介紹了javascript html實(shí)現(xiàn)網(wǎng)頁版日歷代碼,需要的朋友可以參考下2016-03-03
基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08 
