javascript - AngularJs 添加 ... 并将所有标签关闭到摘录

Question

我想为我的应用构建一个摘录过滤器。

从我的后端我得到一个这样的字符串:

<p>this is gonna be a very long text</p>

使用 Angluarjs 的 LimitTo 我得到:

<p>this is gonna be a ver

但我想要这个:

<p>this is gonna be a ver...</p>

我之所以要关闭这些标签，是因为我可以从我的后端获取任何可能的标签。

我如何检查是否所有元素都已关闭并将 ... 添加到最后一个元素？

编辑:

这里有一个更好的例子:

我从我的后端得到一个 JSON，例如:

{ text: "<p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a <img src=\"image.png\"> too.</p>"}

我像这样将这些数据插入到我的 View 中:

<div ng-bind-html="json.text"></div>

结果应该是这样的:

<div>
  <p>This is a very long text with a <a href=\"#\">very long</a>...</p>
  <button>read more</button>
</div>

如果我的字符串中有图像并且我的“剪切”位于此标记中，我想删除该图像。所以我得到了

<div>
  <p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a ...</p>
  <button>read more</button>
</div>

代替

<div>
  <p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a <img sr...</p>
  <button>read more</button>
</div>

Answer 1

在使用 RegExp 进行大量测试后，我决定使用另一种技术。

如果其他人有类似的问题，我想发布我的解决方案。

.text__wrapper {
  position: relative;
  width: 300px;
  margin: auto;
}    

.text-preview {
  margin-bottom: 35px;
  padding: 0 15px;
  box-sizing: border-box;
  display: block;
  max-height: 140px;
  overflow: hidden;
  white-space: normal;
}

.text-preview:after {
  top: 115px;
  width: 100%;
  height: 25px;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#FFFFFF',GradientType=0 ); 
  position: absolute;
  left: 0;
  content: " ";
}

这不是我想要的解决方案，但这对我有用。这是一个 fiddle :

https://jsfiddle.net/2s09e2dv/