angular - 如何在 Angular 2 中截断 HTML 内容？

Question

我使用了一个管道来截断，正常文本工作正常，但在 html 内容中则不行

app.html

  <tr>
  <td>{{howtoreach?.content|truncate :40}}</td>  //html content.not working
  <td>{{howtoreach?.id}}</td>                   //Working
  <td>

Answer 1

我遇到了同样的问题，并意识到很难通过 innerHTML 找到 Angular 2 解决方案.

我的解决方案

您可以创建这样的自定义函数:

truncateHTML(text: string): string {

    let charlimit = 160;
    if(!text || text.length <= charlimit )
    {
        return text;
    }


  let without_html = text.replace(/<(?:.|\n)*?>/gm, '');
  let shortened = without_html.substring(0, charlimit) + "...";
  return shortened;
}

然后在你看来:

<div [innerHTML]="truncateHTML(html_string)"></div>

这应该有效。

---

最后评论

我正在使用innerHTML因为仍然有一堆未格式化的字符，例如:

ø æ  

特别是如果您来自带有 æ、ø 和 å 的北欧国家:)

---

正则表达式来自:StripHTML post .

更新

我必须更换中断<br />在替换 HTML 之前，因此显示时行尾的单词(换行符之前)和下一个单词(行上的第一个单词)之间有空格:

let adding_spaces = text.replace(/<br \/>/g, "&nbsp;");