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

我们发现使用Angular标记术语是一项非常重要的任务，最终使用外部库（Mark.js）。像这样直接操作html可以打破角度的范围，并创建其他问题。如果每个可能的术语都在它自己的小html标签中，那么你可以在每个术语上使用一个过滤器来测试一个共享的术语列表（传入或作为服务的一部分），只要记住“过滤器”是挑剔的关于什么改变输入将引发脏检查和重新评估。

Answer 2

为了完整起见，我最终得到了它，发现功能在我的POV中行为不端。

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

角度亮点＆amp; dehighlight动态html使用过滤器

2 个答案: