выделять искомый текст с помощью AngularJS при разбивке по HTML-тегам

Question

Я пытаюсь выделить искомый текст на веб-странице.Я получаю содержимое веб-страницы с сервера в форме ответа json.В ответе JSON.Я получаю html-ответ с тегами, а также не-html-ответ.В моем ответе HTML.Есть много тегов span, которые разделяют одно слово пустыми тегами span.Например: «Searchtext» имеет вид «<span class="c1">Sea</span>rch<span class="c2">text</span>».Разделение слов происходит в разных позициях в полученном ответе.

Я использую угловое выделение.« angular-highlight » выделяет слово, которое не разделено тегами html.Если слова разделены, это не выделение.Мы настроили код angular-highlight.Но, тем не менее, это не работает.

<span>Sample</span> - будет выделено

<span>Sa<span>mp</span>le</span> - не будет выделено

<span>Sa<span></span>mple<span></span></span> - не будет выделено

Я также использовал метод 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:'&'                                                
    }
};
});