VueJs filter should display last word full-CodePudding

I have used the vue filter to limit the text to 100 characters. I am getting output as

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

If you see the the last word indu ...,. I don't want to have a word breakup in between with few characters of the word and dots, instead I want it be like the complete word then dots, like below :

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

The word should complete after 100 characters then ... needs to appended.

Below is the Vue filter I have used, how can I make to end with complete word and then dots instead few characters of the last word?

 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;

  }
}

CodePudding user response：

Using a Regular Expression, I came up with this solution:

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*$/, ''))

Basically, after extracting the 100 first character, I use a regex to find the last space that is followed by non-space characters, and removes those.

CodePudding user response：

1- get first 100 char

2- slice till index of the next space or end of the text.

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 is not recommended to use. use substring instead.