javascript - 在angularjs中突出显示html字符串中的多个文本

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"
]

索引.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标签

标签： javascriptangularjs

Answer 1

您需要（为简单起见）是一个过滤器，它将返回一个新的修改后的数组。然后，您将需要一个更复杂的正则表达式来同时替换所有关键词。一个简单的OR析取 ( |) 就可以解决问题。然后你不需要循环数组。

这是一个演示：

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 .... 并且由于单词spancontains a，它在您的列表中highlightArray，因此您必须将其替换a为另一个跨度，从而产生类似<sp<span ...n .... 但也许还有别的事情发生。