Выделите многоязычный текст внутри строки HTML в angularjs

Question

У меня проблемы при выделении определенного текста

у меня есть строка

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.'

эта строка может быть в формате html.

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);
    }

на изображении вышедела обстоят нормально без 'a' в строке highlightArray после добавления 'a', тогда это выглядит так

эта ситуация также возникает, когда есть некоторыеслова в массиве highlightArray, такие как тег html (a, sp ())

, поэтому здесь нужно избегать тега html

Answer 1

Что вам нужно (для простоты) - это фильтр, который будет возвращать новый, измененный массив.Тогда вам понадобится более сложное выражение регулярного выражения, чтобы заменить все ваши ключевые слова одновременно.Простое дизъюнкция ИЛИ (|) поможет.Тогда вам не нужно перебирать массив.

Вот демоверсия:

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>

( Я сократил текст )

---

Я полагаю, у вас возникла проблема сцикл for, где вы заменяли контент на <span ....И поскольку слово span содержит a, которое было в вашем списке highlightArray, вам пришлось заменить a другим диапазоном, в результате чего получилось что-то вроде <sp<span ...n ....Но, возможно, что-то еще происходило.