Question

我有：

$scope.text = "<b>TESTNAME</b>"; (This can be any string. This is to specify that there can be html tags written as text in the string.)

粗体标记是文本的一部分，需要仅显示为文本而不是HTML。

现在假设某人输入了搜索字符串（例如，任何人都可以输入任何字符串）：

$scope.searchTerm = "NAME";

然后我希望$ scope.text被修改，以便我看到<b>TESTNAME</b>，但是使用＆＃34; NAME＆＃34;的子串。突出显示。

我的突出显示功能：

$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");

在我必须写的HTML中：

<span ng-bing-html="text"></span>

但是，现在出现的问题是，<b>和</b>也会在HTML表单中呈现，并在其间加粗字符串。

如何处理？

修改为了避免b标记呈现为HTML，我使用以下方法将角括号修改为HTML副本：

$scope.text = $scope.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

使用上述第一个替换功能后。现在，当使用ng-bing-html呈现$ scope.text时，b标记仅呈现为文本。但是，现在添加的span标记也会呈现为文本，因为角括号已被全局替换。

修改解决这个问题的另一种方法是在添加span标签之前更换角度标签以突出显示文本。所以我的亮点功能是：

  $scope.text = $scope.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    $scope.searchTerm = $scope.searchTerm.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    $scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");

然而，问题在于，如果用户搜索字符串lt或gt，则由于替换为＆lt;和＆gt;，突出显示范围也被添加到这些，并且净结果不是预期的。

Answer 1

请查看工作示例：DEMO

控制器：

var app = angular.module('plunker', ["ngSanitize"]);

app.controller('MainCtrl', function($scope) {
    $scope.searchTerm = "NAME";
    $scope.content = "TESTNAME";
    $scope.matchClass = 'bold';
    var re = new RegExp($scope.searchTerm, 'g');
    $scope.content = $scope.content.replace(re, '<span class="' + $scope.matchClass + '">' + $scope.searchTerm + '</span>');
});

HTML

<body ng-controller="MainCtrl">
      <p ng-bind-html="content"></p>
</body>

CSS

.bold {
    font-weight: bold;
}

Answer 2

编辑：新解决方案：

$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "long-random-string-one$1long-random-string-two");

// Any encoding goes here

$scope.text = $scope.text.replace("long-random-string-one", "<span class='highlighted'>").replace("long-random-string-two", "</span>")

这个想法是插入两个不会被编码更改的字符串，并且足够独特，以至于它们极不可能出现在您正在搜索的文本中。如果需要，用GUID替换它们。

突出显示字符串的一部分，其中html实体为text：angularJs

2 个答案: