Angular highlight&dehighlight使用过滤器动态html

Question

我正在尝试编写一组过滤器来突出显示然后取消强制动态生成的html:

突出显示过滤器:

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

我试图剥离span标签并保留原始文本,但我不确定它是否正常工作或返回什么.Str是html字符串.任何帮助将不胜感激!

Answer 1

为了完整起见，我最终得到了它，从我的角度来看，查找功能表现不正常。

取消突出显示的最终解决方案：

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