VueJs 过滤器应该完整显示最后一个单词

Posted 2023-02-16

【中文标题】VueJs 过滤器应该完整显示最后一个单词

【英文标题】：VueJs filter should display last word full

【发布时间】：2022-01-09 17:37:11

【问题描述】：

我已使用 vue 过滤器将文本限制为 100 个字符。我得到的输出为

Tat is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indu ...

如果看到最后一个字indu ...，。我不想在单词和点的几个字符之间进行单词分解，而是希望它像完整的单词然后是点，如下所示：

Tat is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ...

单词应在 100 个字符后完成，然后需要附加 ...。

下面是我使用的Vue过滤器，我怎样才能以完整的单词结尾，然后点而不是最后一个单词的几个字符？

 msg = "<p> Tat is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing</p>\n" 

<h2 v-html="this.$options.filters.limitText(msg)" ></h2>

filters: 
  limitText: function (val) 
   if(val && (val.length > 100) 
     return (val.substr(0, 100) + ' ...')
   
  return val;

  

【参考方案1】：

使用正则表达式，我想出了这个解决方案：

const msg = `Tat is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing`

console.log(msg.substr(0, 100).replace(/\s\S*$/, ''))

基本上，在提取 100 个第一个字符后，我使用正则表达式来查找后面跟着非空格字符的最后一个空格，然后将其删除。

【讨论】：

现在我得到输出，它完全删除了最后一个词，Tat 只是印刷和排版行业的虚拟文本。 Lorem Ipsum 一直是...

整个行业的字都删了

@MadasuK 是的，“工业”这个词被删除了，因为你需要整个词。由于industry's 中的's 被substr 删减，我认为应该删除整个单词。

不，最后一个词应该完整呈现

@MadasuK 那么您可以编辑您的问题以包括应该或不应该削减的内容吗？如果 industry's 应该被撇号切割，像 o'neill 这样的名字也应该被切割成 o 吗？这也会减少其他语言中的单词，例如法语中的aujourd'hui。

【参考方案2】：

1- 获取前 100 个字符

2- 切片直到下一个空格或文本结尾的索引。

const msg = `Tat is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing`

const LAST_INDEX = 99
let msgShort = msg.substring(0,LAST_INDEX)+msg.slice(LAST_INDEX,msg.indexOf(' ',LAST_INDEX))+'...'
console.log(msgShort)

substr 不推荐使用。请改用substring。