Vue.js文本截断filter如何避免截断单词，补全完整单词后追加省略号

你现有代码直接截取固定长度才会出现单词被截断的问题，修改思路为在100字符的截断位置向后查找第一个空白字符，将整个单词包含后再加省略号，同时修正原代码的语法错误、新增HTML标签剥离逻辑避免标签字符占用长度统计额度。

修改后的完整过滤器代码如下：

filters: {
  limitText: function (val) {
    // 空值直接返回
    if (!val) return val
    // 剥离HTML标签统计纯文本长度，避免标签被计入字符数
    const pureText = val.replace(/<[^>]+>/g, '')
    if (pureText.length <= 100) return val
    // 多取20字符预留补全单词的空间，可根据业务最长单词长度调整
    let tempStr = val.substring(0, 120)
    // 查找100字符位置之后的第一个空格下标
    const cutPosition = tempStr.indexOf(' ', 100)
    // 无空格说明剩余内容不足一个单词，直接返回原内容
    if (cutPosition === -1) return val
    // 截断后追加省略号
    return tempStr.substring(0, cutPosition) + ' ...'
  }
}

注意事项 #

• 如果你不需要保留原文本的HTML标签，可直接对剥离标签后的纯文本做截断处理，无需考虑标签截断问题
• 如果对HTML结构完整性要求极高，避免出现截断到标签中间的情况，可以引入轻量HTML解析工具拆分标签和文本后再做截断处理

内容的提问来源于stack exchange，提问作者Madasu K