AngularJS limitTo using HTML tags

Question

I have some bindings in AngularJS and I want to limit the length of characters displayed. It's a quite simple question when you have just a simple text content.

However, I have text that contains HTML tags:

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

and also

$scope.maxNumberOfChar = 10;

When I use the following line it counts the number of chars taking into account HTML tags.

Which could be the best solution to solve this problem and count only the number of chars, discarding HTML tags?

Thanks in advance

Kickoff

Answer 1

I've created a solution, using a simple filter and regex operations.

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; 
    }
})

and the correspondent usage, similar to limitTo filter

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

Note that, in this case I am also using an html-binding, specific of my solution.

Kickoff

Although the main idea to limitHtml filter worked for me but I had to further $sce.trustAsHtml(val) to make it work. Thank you – Superb

Answer 2

I created a filter, the logic is not so good, but it works

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

jsfiddle.net/4x6z283a/1/

Meridel

Answer 3

To count only the number of non HTML chars, use something similar to the answer to this question: angularjs to output plain text instead of html

For example:

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

alert(length);

I've included a further example here: http://jsfiddle.net/n3qjm2u5/

Drews

Answer 4

Why not displaying it based on a filter length?

Just add a limitTo filter

{{ text| limitTo:maxNumberOfChar }}

Laveralavergne

As I said in the question, your solutions just works when you don't have HTML tags inside your text – Kickoff

Ah, sorry, I misunderstood. Probl you want first to remove the text between tags. #20956270 – Laveralavergne