AngularJS中高亮被HTML标签拆分的搜索文本问题求助

看起来你遇到的核心问题是：当搜索关键词被HTML标签（比如示例中的<span>）拆分成零散片段时，原正则表达式无法匹配到这些被标签分隔的字符序列。原指令的正则是直接匹配完整的关键词字符串，但拆分后的关键词字符之间插入了HTML标签，导致匹配失败。

解决方案思路 #

我们需要构建一个能忽略字符间任意HTML标签的正则表达式。具体来说，把搜索关键词的每个字符之间添加一段匹配任意HTML标签的规则，这样不管字符中间夹了多少<span class="c1">这类标签，都能匹配到完整的关键词序列。

修改后的指令代码 #

下面是调整后的完整指令代码，关键修改点我会在后面说明：

angular.module('angular-highlight', []).directive('highlight', function() {
    var matchCount = 0;
    var newCheckKeyword = '';
    
    // 新增：转义正则特殊字符，避免关键词中的特殊符号破坏正则结构
    var escapeRegExp = function(str) {
        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    };
    
    // 新增：生成忽略HTML标签的正则模式
    var buildTagIgnoringPattern = function(keyword) {
        if (!keyword) return '';
        // 转义特殊字符后，将每个字符用(?:<[^>]+>)*连接，允许字符间插入任意HTML标签
        return escapeRegExp(keyword).split('').join('(?:<[^>]+>)*');
    };

    var component = function(scope, element, attrs) {
        if (!attrs.highlightClass) {
            attrs.highlightClass = 'angular-highlight';
        }

        var count = 0;
        var replacer = function(match) {
            count++;
            var temp = matchCount + count;
            // 保留匹配到的原始内容（包含中间的HTML标签），包裹高亮span
            return '<span class="' + attrs.highlightClass + '" id="highlightId' + temp + '">' + match + '</span>';
        };

        var tokenize = function(keywords) {
            keywords = keywords.replace(new RegExp('^ | $', 'g'), '');
            // 替换为构建好的忽略标签的正则模式
            return buildTagIgnoringPattern(keywords);
        };

        scope.$watch('keywords', function(newKeyword, oldKeyword) {
            if (newCheckKeyword === '' || newCheckKeyword !== newKeyword) {
                newCheckKeyword = newKeyword;
                matchCount = 0;
                count = 0;
                scope.sendCount({ count: matchCount });
            }

            if (!scope.keywords || scope.keywords === '') {
                element.html(scope.highlight);
                return false;
            }

            var tokenized = tokenize(scope.keywords);
            // 保持全局、多行、忽略大小写的匹配规则
            var regex = new RegExp(tokenized, 'gmi');
            
            var originalHtml = scope.highlight;
            // 提前统计匹配次数，避免replacer计数可能出现的偏差
            var matches = originalHtml.match(regex);
            count = matches ? matches.length : 0;
            
            var html = originalHtml.replace(regex, replacer);
            element.html(html);
            
            matchCount += count;
            scope.sendCount({ count: matchCount });
            count = 0;
        });
    };

    return {
        link: component,
        replace: false,
        scope: {
            highlight: '=',
            keywords: '=',
            sendCount: '&'
        }
    };
});

关键修改点说明 #

1. 新增escapeRegExp函数：处理搜索关键词中的正则特殊字符（比如.、*、?等），避免这些字符破坏正则表达式的结构。
2. 新增buildTagIgnoringPattern函数：将搜索关键词转换为能忽略字符间HTML标签的正则模式。例如，关键词Searchtext会被转换为：

   S(?:<[^>]+>)*e(?:<[^>]+>)*a(?:<[^>]+>)*r(?:<[^>]+>)*c(?:<[^>]+>)*h(?:<[^>]+>)*t(?:<[^>]+>)*e(?:<[^>]+>)*x(?:<[^>]+>)*t
   

   这个模式会匹配任意位置插入了HTML标签的Searchtext序列，比如你的示例<span class="c1">Sea</span>rch<span class="c2">text</span>。
3. 调整tokenize函数：不再直接返回关键词，而是返回上面构建的特殊正则模式。
4. 优化匹配次数统计：提前用match获取匹配结果，避免replacer函数中的计数可能出现的问题（比如替换过程中计数不准确）。
5. 修正replacer函数：直接使用匹配到的完整内容（包含中间的HTML标签）包裹高亮span，确保原有的标签结构被保留在高亮区域内。

额外注意事项 #

• 如果你需要支持多关键词高亮，可以修改tokenize函数，将多个关键词用|分隔，同时每个关键词都应用buildTagIgnoringPattern处理。
• 测试时注意大小写匹配：当前正则用了i修饰符，会忽略大小写，如果需要精确匹配，可以去掉i。

内容的提问来源于stack exchange，提问作者Deepak