Join string with html entities in javascript and display as HTML?

Question

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.

Answer 1

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

Answer 2

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

Answer 3

You can parse HTML entities before cancating into string

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

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

or can use DOMParser

let p = new DOMParser();
let d = p.parseFromString('…', 'text/html');
let shortName = `${longString.substr(0,9)}${(longString.length>9? ${d.documentElement.textContent}:'';`