Question

我试图在网页上突出显示搜索到的文字。我以json响应的形式从服务器获取内容到网页。在JSON响应中。我正在获得带有标签的html响应以及非HTML响应。在我的HTML回复中。有很多span标签将单个单词与空span标签分开。例如：＆＃34; Searchtext＆＃34;的格式为＆＃34; Searchtext＆＃34;。分裂的单词发生在接收到的单词响应中的各个位置。

我正在使用角度突出显示。＆＃34;的角高亮＆＃34;突出显示未被html标签拆分的单词。如果单词被拆分，则不突出显示。我们已经定制了角度突出显示的代码。但是，它还没有发挥作用。

Sample - 将突出显示

Sample - 不会突出显示

Sample - 不会突出显示

我也使用了 trustAsHtml 方法。但是，它没有用。

请，任何人都可以提出解决方案。

提前致谢。

我已经解释了这个场景。我修改了以下代码，以突出显示我们从HTML响应中获取的内容。我已粘贴代码供您参考。请帮我解决这个问题。

angular.module('angular-highlight', []).directive('highlight', function() {
var matchCount = 0;
var newCheckKeyword = '';
var component = function(scope, element, attrs) {

    if (!attrs.highlightClass) {
                    attrs.highlightClass = 'angular-highlight';
    }
    var count = 0;
    var replacer = function(match, item) {
                    count++;
                    var temp = matchCount+count;
                    return '<span class="'+attrs.highlightClass+'" id="highlightId'+temp+'">'+match+'</span>';
    }


    var tokenize = function(keywords) {
                    keywords = keywords.replace(new RegExp('^ | $','g'), '');
                    return keywords;
    }

    scope.$watch('keywords', function(newKeyword, oldKeyword) {
                    if(newCheckKeyword == '' || newCheckKeyword != newKeyword){
                                    newCheckKeyword = newKeyword;
                                    matchCount = 0;
                                    count = 0;
                                    scope.sendCount({count: matchCount});
                    }
                    //console.log("scope.keywords",scope.keywords);
                    if (!scope.keywords || scope.keywords == '') {
                                    element.html(scope.highlight);
                                    return false;
                    }

                    var tokenized    = tokenize(scope.keywords);
                    // Modified to skip HTML tags
              var regex = new RegExp(tokenized+'(?!([^<]+)?>)', 'gmi');

                    // Find the words
                    var html = scope.highlight.replace(regex, replacer);

                    //var htmlCount = scope.highlight.match(regex, replacer);

                    element.html(html);
                    matchCount = matchCount+count;
                    scope.sendCount({count: matchCount});
                    count = 0;
    });

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

在使用html标签分割时，使用AngularJS突出显示搜索到的文本

0 个答案: