Vue指令如何实现长尾词富文本溢出省略截取效果？

本文共计2069个文字，预计阅读时间需要9分钟。

目录

一、需求描述

二、实现思路

2.1 正则表达式过滤img、video等标签 2.2 截取固定长度的字符 2.3 考虑小写英文单词和数字宽度问题 2.4 注册为全局指令 2.5 文本尾部添加【查看全文】

目录

• 一、需求描述
• 二、实现思路
• 2.1 正则表达式过滤 img、video等标签
• 2.2 截取固定长度的字符数
• 2.3 考虑小写英文字符和数字宽度问题
• 2.4 注册为全局指令
• 2.5 文本尾部添加或
• 三、效果

一、需求描述

文本溢出省略，说实话这些年也实践过很多了，这次是针对富文本字符串，思量想去，也曾试图了解一些知名站点的实现方案，但结果不甚理想。

今天记录的这一版也并不完美，好在也能勉强解决问题。

大体需求就是：针对富文本字符串，即 html 字符串，实现文本溢出省略，并使用... + 结尾。

需求重点分析：

① 针对的是富文本字符串，html 字符串，所以需要特别处理掉 img、input、video、内联样式 等内容。但不能去除全部html标签，因为会有对检索关键字标红的需求。