vue中过滤富文本超出显示省略号

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/wow_scott/article/details/102600217

背景情况

后端通过富文本上传了一篇通告类文章，前端展示时要显示在div中会因为内容过多改变布局。

So

解决思路
为了div不被撑开，无奈截取。但是富文本数据里面有元素标签，空格，换行等乱七八糟的干扰，为了只截取汉字并显示汉字，想到了正则过滤。

解决办法

// 正则过滤富文本
richTextFormat(value) {
	// value = value.replace(/<\/?[^>]*>/g,'')
	value = value.replace(/<\/?.+?>/g,'')
  	value = value.replace(/\s+/g,'')
	  if (value.length > 30) {
    	return value.slice(0, 30) + "...";
  	}
  	return value;
},

搞定。