【工作小tip】后台富文本在前端显示不成功、文本超过部分用省略号代替、js用正则处理后台传来的富文本图片

后台富文本编辑器编辑的文本在前端显示不成功

vue有一个设置元素的innerHTML的属性叫v-html，可以把富文本数据转为html代码

解决代码：

<view v-html="notice.noticeContent"></view>

文本超过部分用省略号代替

刚想提交，突然想到主页通知标题部分如果犯病写得很长的话超出的部分最好不要换行用省略号代替

			.announce {
				font-family: PingFangSC;
				margin-top: 20rpx;
				font-size: 35rpx;
				font-weight: 800;
				overflow: hidden;      //盒子超出隐藏
				text-overflow: ellipsis;      //超出部分以省略号显示
				white-space: nowrap; //文本强制一行显示,也就是不能换行
			}

处理富文本传过来的图片大小：js将后台传过来的图片的样式清除再自己加上

相对棘手的bug，因为通知公告那边后台富文本的图片传过来样式不一，有些过大了，所以想在传过来时修改富文本的图片样式。

刚开始在网上查了资料，直接给文本图片加样式，一编译，结果没用

代码如下：

::v-deep{
			p img {           
			width: 100% !important;  //--------------------设置大小  添加!important
			height: auto !important;
		}
} 

心想那我直接用replace加正则在富文本内容的图片标签本身加style总可以了吧，心想万无一失了，结果还是不行

代码如下：

// // 将你要渲染的数据进行字符串正则匹配
notice.noticeContent = notice.noticeContent.replace(
		'<img ',
		'<img style="width:100% !important;height:auto;" '
);

debugger看了一下数据，发现确实加上了我想加的样式

怎么回事？？？

问了一下豪哥，跟他又仔细看了一下，发现原来图片传过来的时候自带了样式style=“width:1260px”，并且放在标签的最后面，而我的样式在标签的最前面，它的优先级比我高

既然如此就要想办法提高我加的样式的优先级，于是在我的style里面加了!important，没有用

查了下资料，网上有个方法是直接用正则把图片之前的style里的width和height删掉再加，跟着试了一下，果然成功了

代码如下：

			initData() {
				uni.showLoading({
					mask: true
				})
				Promise.all([ApiGetNewestNotice()]).then(
					res => {
						const notice = res[0].data.rows[0] || []
						//处理富文本里自带的图片大小，添加自定义的图片大小
						notice.noticeContent = formatRichText(notice.noticeContent)
						this.notice = notice
						uni.hideLoading()
						this.finishInt = true
					})
			},
			/**
			 * 处理富文本里自带的图片大小，添加自定义的图片大小
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 */
			formatRichText(notice) {
				
				let newContent = notice.toString().replace(/<img[^>]*>/gi, function(match, capture) {
					// match = match.replace(/style="[^"]+"/gi, '').replace(/style=\"(.*)\"/gi, '');
					//重点改了这里，直接删掉了存在的style，无论是在前还是后的style
					match = match.toString().replace(/style="[^"]+"/gi, '').replace(
						/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '');
					match = match.toString().replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.toString().replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.toString().replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.toString().replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
						'width:100%;');
					return match;
				});
				newContent = newContent.toString().replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.toString().replace(/\<img/gi, '<img style="width:100%;height:auto;"');
				return newContent;
			}

参考链接