rich-text标签富文本解析

文仔酱酱酱

已于 2023-04-07 13:50:16 修改

阅读量896

点赞数 1

文章标签：前端 javascript css

于 2023-03-10 14:11:11 首次发布

本文链接：https://blog.youkuaiyun.com/baidu_41899377/article/details/127344839

版权

在uniapp开发小程序时遇到rich-text标签解析富文本的列表显示问题，尤其是多行文本省略号在iOS设备上无法正常工作。通过创建一个过滤器函数，利用正则表达式去除富文本标签并处理空格及特殊字符，实现了当内容超过指定长度时添加省略号的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做uniapp开发小程序时，实现rich-tex标签解析富文本实现列表。但是省略号在ios上使用不了

/*多行文本溢出省略号*/
.more-t {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   transition: all linear 0.2s;
}

在真机调试时，发现样式写在rich-text不生效。网上的很多在富文本内容基础上加个div语法会异常，页面也并没有生效。

解决办法是：建立一个过滤器正则处理

filters: {
			/* 限制字数后添加省略号 */
			subtext(str, length = 50) {
				var reg = new RegExp("<[^>]+>", "g"); //正则识别去掉富文本
				var str = str.replace(reg, '');
				str = str.replace(/&[a-zA-Z]+\;/gi, '') //正则去掉 &开头中间英文最后分号的未识别的富文本符号
				str = str.replace(/[\t\n\r\f\v ]+/g, '') //正则去掉空格，换行等
				// 如果超出指定长度，则截取并使用省略号
				if (str.length >= length) {
					return str.substring(0, length) + '...';
				} else {
					return str;
				}
			}
		},


<rich-text :nodes="item.content|subtext"></rich-text>