在文本輸入中突出顯示匹配的正則表達式

我有一個測試正則表達式的工作代碼：突出顯示匹配的正則表達式。但我的問題是，我想突出顯示與要測試的字符串相同的輸入結果。請找到HTML和JS和兩個圖片描述的結果，我得到了和預期的結果如下..在文本輸入中突出顯示匹配的正則表達式

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。例如：

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

然後，在溶液I中使用的控制器（如你所做的那樣）：

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

上面的代碼將解決該溶液中。但是，因爲我們正在做一些DOM操作，所以最好通過指令來完成。

來源

2016-10-02 15:16:40 Zakaria

謝謝了很多@Zakaria，我不需要改變輸入的文字背景顏色，或者我可以在html文件中做 – slama

嗨@Zakaria，我還有一點小問題;在突出顯示結果後，如果我添加另一個字符的輸入將是空的..所以如何編輯，所以我可以繼續輸入任何東西，而無需將輸入設置爲emty ... – slama

在文本輸入中突出顯示匹配的正則表達式

回答

相關問題