CODEWITHSUNDEEP
javascriptjqueryangularjs
RandomUs1r
RandomUs1r

Reputation: 4188

Angular highlight & dehighlight dynamic html using filters

I'm trying to write a set of filters to highlight and then dehighlight dynamically generated html:

Highlight filter:

app.filter('highlight', function ($sce) {
    return function (str, termsToHighlight) {
        // Sort terms by length
        termsToHighlight.sort(function (a, b) {
            return b.length - a.length;
        });
        var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'g');
        return $sce.trustAsHtml(str.toString().replace(regex, '<span class="highlightedSpan" style="background-color: yellow; ' +
            'font-weight: bold;">$&</span>'));
    };
});

Dehighlight:

app.filter('dehighlight', function ($sce) {
    return function (str) {

        var obj = $($.parseHTML(str));

        obj = obj.find('.highlightedSpan').replaceWith(function () { return this.innerHTML; });

        return $sce.trustAsHtml(obj.html());
    };
});

I'm trying to strip away the span tag and leave the original text, but I'm not sure if it's working or what to return. Str is the html string. Any help would be greatly appreciated!

Upvotes: 8

Views: 563

Answers (2)

RandomUs1r
RandomUs1r

Reputation: 4188

Just for completeness sake, I got it in the end, the find function was misbehaving from my POV.

Final solution for dehighlighting: 

app.filter('dehighlight', function () {
    return function (str) {
        var obj = $('<div/>').append(str);

        obj.find('span.highlightedSpan').replaceWith(function () { return this.innerHTML; });

        return obj.html().toString();
    };
});

Upvotes: 2

nclu
nclu

Reputation: 1059

We found marking terms with Angular to be a non-trivial task and ended up using an outside library (Mark.js). Manipulating the html directly like that can break angular's scoping and create other issues. If each possible term is in it's own little html tag, then you can use a filter on each one to test against a shared list of terms (either passed in or as part of a service), just remember that the "filter" is finicky about what changing inputs will fire a dirty-check and re-evaluate.

Upvotes: 3

Related Questions