javascript - 正则表达式帮助 Angular 过滤器突出显示 html 中的匹配文本

Question

我有这个可以工作，但是正则表达式与 html 标签匹配，有什么方法可以让它忽略 html 标签。谁能帮我修改正则表达式，以便我的类仅应用于文本而不匹配 html 标签？

angular.module('my.filters')
    .filter('highlight', function ($sce) {
        return function (text, filterPhrase) {
            if (filterPhrase) text = text.replace(new RegExp('(' + filterPhrase + ')', 'gi'), '<span class="quick-find-highlight">$1</span>');
            return $sce.trustAsHtml(text);
        };
    });

Answer 1

您可以尝试以下代码，其中我按标签拆分并仅在字符串不是标签时进行替换。

angular.module('my.filters')
    .filter('highlight', function($sce) {
        return function(text, filterPhrase) {
            if (filterPhrase) {
                var tag_re = /(<\/?[^>]+>)/g;
                var filter_re = new RegExp('(' + filterPhrase + ')', 'gi');
                text = text.split(tag_re).map(function(string) {
                    if (string.match(tag_re)) {
                        return string;
                    } else {
                        return string.replace(filter_re, 
                                              '<span class="quick-find-highlight">$1</span>');
                    }
                }).join('');
            }
            return $sce.trustAsHtml(text);
        };
    });