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

在上面的图片中，在highlightArray字符串中没有'a'的情况下很好 在添加'a'之后，这就像那样

当highlightArray中有一些单词像html标签（a，sp（））

时，也会出现这种情况

所以这里我需要避免使用html标签

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 ...替换了内容。由于span这个词包含a，它位于您的列表highlightArray中，因此您必须将该a替换为另一个范围，从而产生类似<sp<span ...n ...的内容。但也许其他事情正在发生。