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

富文本截取与正则过滤技巧

最新推荐文章于 2024-05-31 14:47:35 发布

原创最新推荐文章于 2024-05-31 14:47:35 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤富文本

技术总结专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种处理富文本数据的方法，通过正则表达式过滤掉HTML标签和空白字符，实现对富文本内容的截取，确保前端布局不被长篇文章破坏。

背景情况

后端通过富文本上传了一篇通告类文章，前端展示时要显示在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;
},

搞定。