vue filtered rich text exceeds displayed ellipsis

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/wow_scott/article/details/102600217

Background

Upload a rear end of the notice articles by rich text to be displayed in a div will change too much because of the content layout when the front end of the show.

So

Solutions
In order not to be div distraction, frustration interception. However, there are rich text data mess interference element tag, spaces, line feed, and characters to display Chinese characters only interception, thought a regular filter.

Solution

// 正则过滤富文本
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;
},

Get.