如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容;然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过
1.富文本去除html标签
去除html标签及空格
letrichText='sdaflsjf的丰富及饿哦塞尔dsfjlie'; /*去除富文本中的html标签*/ /**、+限定符都是贪婪的,因为它们会尽可能多的匹配文字,只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/ letcontent=richText.replace(/<.+?>/g,''); console.log(content); /*去除 */ content=content.replace(/ /ig,''); console.log(content); /*去除空格*/ content=content.replace(/\s/ig,''); console.log(content);
截取字符串
content=formatRichText(content);
console.log(content);
/*使用substring来截取字符串*/
if(content.length>10){
content=content.substring(0,10)+'...';
}
console.log(content);
/*限制字数后添加省略号*/
functionformatRichText(richText){
lettemporaryText='';
/*设置多长后添加省略号*/
constlen=142;
if(richText.length*2<=len){
returnrichText;
}
/*用于记录文字内容的总长度*/
letstrLength=0;
for(leti=0;i128){
strLength=strLength+2;
if(strLength>=len){
returntemporaryText.substring(0,temporaryText.length-1)+"...";
}
}else{
strLength=strLength+1;
if(strLength>=len){
returntemporaryText.substring(0,temporaryText.length-2)+"...";
}
}
}
returntemporaryText;
}
2.vue中使用过滤器
filters:{
localData(value){
letdate=newDate(value*1000);
letMonth=date.getMonth()+1;
letDay=date.getDate();
letY=date.getFullYear()+'年';
letM=Month<10?'0'+Month+'月':Month+'月';
letD=Day+1<10?'0'+Day+'日':Day+'日';
lethours=date.getHours();
letminutes=date.getMinutes();
lethour=hours<10?'0'+hours+':':hours+':';
letminute=minutes<10?'0'+minutes:minutes;
returnY+M+D+''+hour+minute;
}
}
/*使用,直接在div中添加就可以了,|前面的是参数,后面的是过滤器*/
{{data.etime|localData}} 3.微信小程序中使用过滤器
新建.wxs文件
varlocalData=function(value){
vardate=getDate(value*1000);
varMonth=date.getMonth()+1;
varDay=date.getDate();
varhours=date.getHours();//计算剩余的小时
varminutes=date.getMinutes();//计算剩余的分钟
varY=date.getFullYear()+'-';
varM=Month<10?'0'+Month+'-':Month+'-';
varD=Day+1<10?'0'+Day+'':Day+'';
varH=hours<10?'0'+hours+':':hours+':'
varm=minutes<10?'0'+minutes:minutes;
returnY+M+D+""+H+m;
}
module.exports={
localData:localData
}
使用,用
{{tool.filterScore(item.shop.score)}}分
直接在.wxml文件中用
varsome_msg="helloworld"; module.exports={ msg:some_msg, } {{foo.msg}}
4.react中使用
react中使用,其实就是定义一个方法
importnoBannerfrom'@/assets/storeDetail/no-banner.jpg'
constfilterImg=item=>{
letbgImg;
if(item.shopimages==null){
bgImg=noBanner;
}else{
bgImg=item.shopimages[0];
}
returnbgImg;
};
/*使用*/
总结
以上所述是小编给大家介绍的如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!