0

In angular controller file, I want to add suffix ... to make shorten a string if it is lengthy but now ... is now a spread operator in es6 so try using … and tried but it prints the text … not ... in HTML

trial 1

let shortName = `${longString.substr(0,9)}${(longString.length>9? '…':'';`

trial 2

$sce.trustAsHtml(shortName + '…')

but in HTML it show &hellp; not the ...

Note: I can use ng-bind-html but this string is used as a label in chart which is in <canvas> and that is created by the angular-chrat.js library.

I do not want to manipulate it through library but using core Javascipt.

Rajez
  • 3,717
  • 1
  • 14
  • 21
xkeshav
  • 53,360
  • 44
  • 177
  • 245

3 Answers3

2

You can use the utf-8 equivalent character if you have set your charset to utf-8: '…'

You mentioned you are using it in canvas? If so you have to convert your entity into a symbol instead. You can use a DOMParser for that.
Here is a way to do that

lumio
  • 7,428
  • 4
  • 40
  • 56
  • yes I can use but I want to know how to use html entities in javascript. – xkeshav Aug 31 '17 at 17:40
  • Thank you for the reference, this is working fine but still checking does angular have the solution for this? – xkeshav Aug 31 '17 at 17:54
  • What do you mean by checking? – lumio Aug 31 '17 at 18:00
  • I means looking for angularJS solution also.yes this is working and I have accepted the answer. – xkeshav Aug 31 '17 at 18:02
  • I think the angular version would be to use `ng-bind-html`. Even with $sce, you kinda need to use `ng-bind-html` – lumio Aug 31 '17 at 18:05
  • I am try using `.filter` but it change the string into array – xkeshav Aug 31 '17 at 18:06
  • Yes, [`.filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) is used to filter elements inside an array and a string is kinda a represantation of a character array. You could use [`.replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) though - but all of that is pure javascript – lumio Aug 31 '17 at 18:09
  • created as angular [filter](https://gist.github.com/zymr-keshav/2377d5d46dafde1e2c474b60152c4696). Thanks for the help . – xkeshav Aug 31 '17 at 19:14
0

Have you tried ng-bind-html? Click here to check documentation

Nafiul Islam
  • 1,220
  • 8
  • 20
0

You can parse HTML entities before cancating into string

let e = document.createElement('div');
e.innerHTML = '&hellip;';

let shortName = `${longString.substr(0,9)}${(longString.length>9? ${e.innerText}:'';`

or can use DOMParser

let p = new DOMParser();
let d = p.parseFromString('&hellip;', 'text/html');
let shortName = `${longString.substr(0,9)}${(longString.length>9? ${d.documentElement.textContent}:'';`
Rajez
  • 3,717
  • 1
  • 14
  • 21