在复选框单击时突出显示HTML文档Angularjs中的文本

Question

我正在开发一个项目，我有一个复选框，点击该复选框，我想突出显示文档中的某些文本，这是一个带有标签的HTML文档。所以，目前我能够突出显示该文档中的单个单词，但如果要突出显示的单词是"alt"而alt也是HTML tag，那么，对于此HTML文档会变得混乱起来。另一件事是如果我想突出显示一个文件的某些部分，它可以有超过3行（不具体）或者可能是一个段落。我如何突出显示该部分？要显示我使用的文档text-angular directive。提前致谢。

我的精彩集锦功能是 -

$scope.highlightHTML = function(content, text, className, notByWordBoundry){                    
                    var RegExpEscapeText, str;
                    if (!(content && content.replace)) {
                        return '';
                    }
                    if (!text) {
                        return $sce.trustAsHtml(content);
                    }
                    if (!className) {
                        className = 'mark';
                    }
                      RegExpEscapeText = text.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
                      if (!notByWordBoundry) {
                          str = new RegExp('(\\b)' + RegExpEscapeText + '(\\b)','gi');
                      } else {
                          str = new RegExp(RegExpEscapeText,'gi');
                      }
                      return content.replace(str , '<span tabindex="1" class="' + className + '">$&</span>');
                };

所以这里的内容将始终是一个HTML文档。

uploadService.getDocumentAsHTML($scope.documentType,uploadService.currentFileName) 
                        .then(function(data) {
                            var parser = new DOMParser(); 
                            var originaldoc = data;
                            var responseData = data;
                            $scope.htmlOriginalDoc = parser.parseFromString(originaldoc, 'text/html');
                            var stringData =  "To serve in an organization that lends me a supportive and co-operative learning environment to diversify skills in Programming, challenge me intellectually and offer me a good potential for future";
                            responseData = $scope.highlightHTML(responseData, stringData);
                            $rootScope.data.htmlDocument = responseData;
                            $scope.showloadingdocument = true;

                        }, function(error) {
                            $scope.errorMessage = error.status + " : " + error.statusText;
                            toastr.error($scope.errorMessage, 'Error : ' + error.status);
                            if (error.status === 401) {
                                loginService.authenticationError();
                            }
                        })
                        .finally(function () {
                            $scope.fetchingDocumentAsHTML = false;
                        });                    
                };