Markieren Sie mehrere Wörter mit AngularJS Filter

Question

Ich benutze AngularJS und im Moment nur ein einziges Wort in einem Text zu markieren. Aber ich möchte mehrere Wörter mit verschiedenen Farben hervorheben.

Mit dieser Antwort vom Netzanruf:

{ 
    "text" : "This is a long wall of text of which contains multiple words that I want to highlight using multiple colors", 
    "word1" : "wall", 
    "word2" : "words", 
    "word3" : "colors" 
} 

Ich möchte wie diese den Text anzuzeigen:

Answer 1

Hier ist eine Möglichkeit, dies zu tun, während Sie Ihre Datenstruktur beibehalten.

angular.module('myApp', []) 
 
    .controller('myCtrl', function($scope) { 
 
    $scope.response = { 
 
     "text": "This is a long wall of text of which contains multiple words that I want to highlight using multiple colors", 
 
     "word1": "wall", 
 
     "word2": "words", 
 
     "word3": "colors" 
 
    }; 
 
    }) 
 
    .directive('highlight', function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     data: '=' 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
     let text = scope.data.text; 
 
     delete scope.data.text; 
 
     let words = Object.values(scope.data); 
 

 
     element.html(text.split(" ").map(function(w) { 
 
      let index = words.indexOf(w); 
 
      return index !== -1 ? '<span class="word' + (index + 1) + '">' + w + '</span>' : w; 
 
     }).join(" ")); 
 
     } 
 
    }; 
 
    });

.word1 { 
 
    background-color: yellow; 
 
} 
 

 
.word2 { 
 
    background-color: green; 
 
} 
 

 
.word3 { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <highlight data="response"></highlight> 
 
</div>

Answer 2

hier andere Art und Weise fiddle Bären Arbeit zu tun!

function myCtrl($scope) { 
$scope.item = { 
text: "I am a Bear in the forest. We are two bears climbing a tree.", 
search: [{ 
    text: "Bear", 
    color: "brown" 
}, { 
    text: "forest", 
    color: "green" 
}, { 
    text: "tree", 
    color: "orange" 
}] 
}; 
} 

var app = angular.module('myApp', ['highlightDirective']); 
app.controller('myCtrl', ['$scope', myCtrl]); 

function highlight() { 

var directive = { 
restrict: 'E', 
scope: { 
    text: '=', 
    search: '=' 
}, 
link: function link(scope, $element, attr) { 

var text = scope.text; 
var search = scope.search; 

for (var i = 0; i < search.length; i++) { 
    var s = search[i]; 
    var html = '<span class="highlightText ' + s.color + '">$&</span>'; 

    text = text.replace(new RegExp("\\b" + s.text + "\\b"), html); 
} 

    $element.html(text); 
    } 
    }; 
    return directive; 
} 

var highlightDirectiveModule = angular.module("highlightDirective", []); 
highlightDirectiveModule.directive('highlight', highlight);