javascript 文章截取部分無損html顯示實現代碼

來源:互聯網
上載者:User

因為是html格式的內容,直接截取內容的前多少字元顯然不合適了。而如果直接去掉所有html格式然後再截取又無法達到想要的效果,再網上搜了一通之後,寫下如下代碼應該可以滿足基本的要求了。(js寫的,因為容易調試) 複製代碼 代碼如下:var br = {};
br.spTags = ["img","br","hr"];/*不需要成對出現的標記*/
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;
}
}
/*對字串進行處理*/
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等不需要成對出現的標記*/
var newStartTags = [];
for(var x=0,len=startTags.length;x<len;x++){
if(!br.contain(br.spTags,startTags[x])){
newStartTags.push(startTags[x]);
}
}
/*添加沒有的結束標記*/
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.繞過標記,取得實際內容字數 ,如需要顯示內容前100個字,繞過標記檢索,得到第一百個字實際的索引。然後截取此索引前面的字串。

2.根據一得到的字串,得到這個字串中存在的開始標記和結束標記。註:此處的開始標記標識以"<"開通,且下一個字元不為"/"。

3.剔除2中 得到的開始標記中的不需要成對出現的標記。如br,img,hr等。

4.對比經過3處理的開始標記和2中得到的結束標記,沒有配成對的在合適的位置為其配對。

此功能沒有經過嚴格的測試,大家若有興趣可以可以幫忙測試,有更好的想法的也可以回帖討論。

作者:cnblogs bravfing

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.