Question

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

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

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

以及

$scope.maxNumberOfChar = 10;

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

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

提前致谢

Answer 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绑定，特定于我的解决方案。

Answer 2

要仅计算非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/

Answer 3

我创建了一个过滤器，逻辑不是那么好，但它可以正常工作

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

jsfiddle.net/4x6z283a/1/

Answer 4

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

只需添加limitTo过滤器

即可

{{ text| limitTo:maxNumberOfChar }}

AngularJS limitTo使用HTML标签

4 个答案: