更改字母第一個字母的字體顏色

Question

我試圖找到一種方法來更改第一個匹配字母的字體顏色。例如，如果字符串是'文本'，我想改變'e'黃色的顏色。那麼只有第一個e會受到影響。 '釷è文本' 這是我要遠：

<div class="translation-esan-div"> 
    {{$scope.someValue}} 
</div> 

當我訪問使用該元素：

angular.element(document.getElementsByClassName("translation-esan-div")) 

返回的文本（）值是{{$ scope.someValue }}而不是角度評估的文本。

$ scope.someValue中的文本可能是任何東西。我已經有一個預定義的CSS類指定顏色。要更改的信將傳遞給隨附的控制器。我怎麼去改變一個特定字母的顏色？

Answer 1

您可以嘗試使用JavaScript來拉取所需元素的內容，執行一些普通的舊字符串處理，然後將2個嵌套的<span> s推回到原始容器中，內部元素替換字母並將樣式應用於將"translation-esan-div"類指定給內部的<span>元素。

Answer 2

經由ngBindHtml嘗試這種解決方案：

angular.module('app',['ngSanitize']).controller('MyController', ['$scope', function($scope) {  
 
    $scope.process = function(letter, text){ 
 
     if(letter && text){ 
 
      var index = text.indexOf(letter); 
 
      var result = ''; 
 
      if(index != -1){ 
 
       for(var i = 0 ; i < index; i++) 
 
       result += text[i]; 
 
       result += '<span class="yellow">' + text.substr(index, letter.length) + '</span>'; 
 
       for(var i = index + letter.length ; i < text.length; i++) 
 
       result += text[i]; 
 
       return result; 
 
      }   
 
     } 
 
     return text; 
 
    } 
 
}]);

.yellow { 
 
    color: yellow; 
 
}

<script src="//code.angularjs.org/snapshot/angular.min.js"></script> 
 
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script> 
 

 
<div ng-app='app' ng-controller="MyController"> 
 
    letter: 
 
    <input ng-init='letter="e"' ng-model='letter' type='text'/> 
 
    <br> 
 
    text: 
 
    <input ng-init='someValue="The text"' ng-model='someValue' type='text'/> 
 
    <p ng-bind-html="process(letter, someValue)"></p> 
 
</div>