AngularJS 限制使用 HTML 标签答案

【问题标题】：AngularJS limitTo using HTML tagsAngularJS 限制使用 HTML 标签
【发布时间】：2014-11-21 15:05:02
【问题描述】：

我在 AngularJS 中有一些绑定，我想限制显示的字符长度。当您只有一个简单的文本内容时，这是一个非常简单的问题。

但是，我有包含 HTML 标记的文本：

$scope.text = "<span><h1>Example</h1><p>Special Text</p></span>"

还有

$scope.maxNumberOfChar = 10;

当我使用以下行时，它会计算考虑到 HTML 标记的字符数。

哪一个是解决这个问题的最佳解决方案，只计算字符数，丢弃 HTML 标记？

提前致谢

【问题讨论】：

标签： angularjs

【解决方案1】：

我创建了一个解决方案，使用简单的过滤器和正则表达式操作。

var appFilters = angular.module('myApp.filters', [])
.filter('limitHtml', function() {
    return function(text, limit) {

        var changedString = String(text).replace(/<[^>]+>/gm, '');
        var length = changedString.length;

        return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString; 
    }
})

以及对应的用法，类似于limitTo过滤器

<span ng-bind-html="text | limitHtml: maxNumberOfChar"></span>

请注意，在这种情况下，我还使用了特定于我的解决方案的 html 绑定。

【讨论】：

虽然 limitHtml 过滤器的主要思想对我有用，但我必须进一步 $sce.trustAsHtml(val) 才能使其工作。谢谢

【解决方案2】：

我创建了一个过滤器，逻辑不太好，但它可以工作

 <span ng-bind-html="text | limitHtml:maxNumberOfChar"></span>

jsfiddle.net/4x6z283a/1/

【讨论】：

【解决方案3】：

要仅计算非 HTML 字符的数量，请使用类似于此问题答案的内容： angularjs to output plain text instead of html

例如：

var text = "<span><h1>Example</h1><p>Special Text</p></span>";
var length = String(text).replace(/<[^>]+>/gm, '').length;

alert(length);

我在这里添加了另一个示例：http://jsfiddle.net/n3qjm2u5/

【讨论】：

【解决方案4】：

为什么不根据过滤器长度显示它？

只需添加一个 limitTo 过滤器

{{ text| limitTo:maxNumberOfChar }}

【讨论】：

正如我在问题中所说，当您的文本中没有 HTML 标签时，您的解决方案才有效
啊，对不起，我误会了。可能您首先要删除标签之间的文本。 stackoverflow.com/questions/20955770/…