テキスト入力で一致する正規表現をハイライト表示

正規表現をテストする作業コードがあります。一致する正規表現を強調表示します。しかし、私の問題は、テストする文字列と同じ入力で結果を強調したいということです。 htmlとjsファイルと2枚の写真私が得た結果を説明し、期待される結果の下に見つけてください。..テキスト入力で一致する正規表現をハイライト表示

HTML：

<body ng-app ng-controller="MainCtrl"> 
     <input type="text" ng-model="regex" class="span-12 pdg-sm font-lg brd-rad-md" placeholder="Enter your regex" ng-change="applyRegex()"> 
     <input ng-model="stringToTest" ng-change="applyRegex()" rows="6" class="spdg-sm" ng-bind-html="highlightedResults"> 
     <pre class="pdg-sm" ng-bind-html="highlightedResults"></pre>

JS：

function MainCtrl($scope, $sce) { 
$scope.stringToTest = ''; 
$scope.applyRegex = function() 
{ 
    $scope.results = []; 
    $scope.highlightedResults = ''; 

     var regex = new RegExp('(' + $scope.regex + ')'); 
     $scope.results = $scope.stringToTest.match(); 
     $scope.highlightedResults = $sce.trustAsHtml($scope.stringToTest.replace(regex, '<b style="color: #FFF; background-color: green;" class="mrg-xs pdg-xs brd-rad-sm">$1</b>')); 
     console.log($scope.highlightedResults); 
}}

Result that i got

Result expected

出典

2016-10-02 slama

I jsfiddledあなたが適用される場合がありますソリューション。

入力テキストの背景色を変更するには、CSSを追加する必要があります。例：上記のコードは、溶液を解決する

angular.module('testapp', []).controller('TodoCtrl', 

    ['$scope', function($scope){ 
    $scope.stringToTest = ''; 
    $scope.applyRegex = function() 
    { 
     $scope.results = []; 
     $scope.highlightedResults = ''; 

      var regex = new RegExp('(' + $scope.regex + ')'); 
      $scope.results = $scope.stringToTest.match(regex); 
      if ($scope.results){ 
       var firstResult = $scope.results[0]; 
       document.querySelector("input[name=result]").setSelectionRange(0, (firstResult.length)); 
      } 
    } 
    }]);

：（あなたが行ったように）私は、コントローラを使用した溶液に次に

input.green::selection { 
    background: green; 
    color:white; 
}

、。しかし、DOM操作をいくつか行っているので、ディレクティブを使用して実行することが望ましいです。

出典

2016-10-02 15:16:40 Zakaria

ありがとうございます@ザカリア、私は入力テキストの背景色を変更する必要はありませんか、多分私はhtmlファイルでそれをやろうとします – slama

もう一度@Zakaria、私は少し別の問題があります。私は別の文字を追加する場合、結果を強調表示した後、入力は空です..どのように私はemtyに入力を設定せずに何かを入力し続けることができるように編集することができます... – slama

テキスト入力で一致する正規表現をハイライト表示

答えて

関連する問題