Highlight mulitpal text inside string of html in angularjs

Question

i am having problem while highlighting particular text

i have is string

var text = 'Aims: Calcified aortic stenosis (AS) and mitral annular calcification (MAC) have certain similar etiology and pathophysiological mechanisms. MAC is frequently encountered in pre-procedural computed tomography (CT) imaging of patients that undergo transcatheter aortic valve replacement (TAVR), but its prognostic implications for these patients have not been thoroughly investigated. This study sought to evaluate the prevalence of MAC among patients with severe AS and to assess the clinical implications of MAC on these patients during and following TAVR. Methods and results: Consecutive patients that underwent TAVR were compared according to the existence of MAC and its severity in pre-TAVR CT scans. From the entire cohort of 761 patients, 49.3% had MAC, and 50.7% did not have MAC. Mild MAC was present in 231 patients (30.4%), moderate MAC in 72 patients (9.5%), and severe MAC in 72 patients (9.5%). Thirty-day mortality and major complications were similar between patients with and without MAC. In a multivariable survival analysis, severe MAC was found to be an independent strong predictor of overall mortality following TAVR (all-cause mortality: hazards ratio [HR] 1.95, 95% confidence interval [CI] 1.24-3.07, P = 0.004; cardiovascular mortality: HR 2.35, 95% CI 1.19-4.66; P = 0.01). Severe MAC was also found to be an independent strong predictor of new permanent pacemaker implantation (PPI) after TAVR (OR 2.83, 95% CI 1.08-7.47; P = 0.03). Conclusion: Half of the patients with severe AS evaluated for TAVR were found to have MAC. Severe MAC is associated with increased all-cause and cardiovascular mortality and with conduction abnormalities following TAVR and should be included in future risk stratification models for TAVR.'

this string could be html formated.

var highlightArray = [
  "heart attack",
  "disorder",
  "choleterol",
  "replacement",
  "aortic ",
  "study ",
  "included ",
  "a"
]

index.html

 <fieldset>
            <legend>data</legend>
            <span ng-bind-html="model.abstract"></span>
 </fieldset>

index.js

function highlightTitleAndAbstract(abstract, highlightArray) {
        if (highlightArray.length == 0) {
            return $sce.trustAsHtml(abstract);
        }
       for (var i = 0; i < highlightArray.length; i++) {
        abstract = abstract .replace(new RegExp(highlightArray[i].trim(), 'g'), '<span class="highlightedText">$&</span>');
       }
        return $sce.trustAsHtml(abstract);
    }

in above image things are woring fine without 'a' in highlightArray string after adding 'a' then this goes like that

this situation also comes when there are some words in highlightArray arrry like html tag (a , sp ())

so here i need to avoid html tag

Answer 1

What you need (for simplicity) is a filter, which will return a new, modified array. Then you would need a more complex regex expression to replace all of your key words at the same time. A simple OR disjunction (|) would do the trick. Then you don't need to loop over an array.

Here is a demo:

var app = angular.module('myApp', ["ngSanitize"]);
app.controller('myCtrl', function($scope, $sce) {
  $scope.text = 'Aims: Calcified aortic stenosis (AS) and mitral annular calcification (MAC) have certain similar etiology and pathophysiological mechanisms. MAC is frequently encountered in pre-procedural computed tomography (CT) imaging of patients that undergo transcatheter aortic valve replacement (TAVR), but its prognostic implications for these patients have not been thoroughly investigated. This study sought to evaluate the prevalence of MAC among patients with severe AS and to assess the clinical implications of MAC on these patients during and following TAVR. Conclusion: Half of the patients with severe AS evaluated for TAVR were found to have MAC. Severe MAC is associated with increased all-cause and cardiovascular mortality and with conduction abnormalities following TAVR and should be included in future risk stratification models for TAVR.';

  $scope.highlightArray = [
    "heart attack",
    "disorder",
    "choleterol",
    "replacement",
    "aortic",
    "study",
    "included"
  ];
});

app.filter('highlight', function($sce) {
  return function(text, highlightArray) {
    var regex = new RegExp('(' + highlightArray.join('|') + ')', 'g');
    return $sce.trustAsHtml(text.replace(regex, '<span class="highlightedText">$&</span>'));
  };
});

.highlightedText {
  background-color: #FFFF00
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.9/angular-sanitize.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <fieldset>
      <legend>Data</legend>
      <span ng-bind-html="text | highlight:highlightArray"></span>
    </fieldset>

  </div>

</body>

</html>

(I made the text shorter)

---

I believe you had a problem with your for loop, where you were replacing content with <span .... And since the word span contains a, which was in your list highlightArray, you had to replace that a with another span, resulting in something like <sp<span ...n .... But maybe something else was going on.