在文本输入中突出显示匹配的正则表达式

我有一个测试正则表达式的工作代码：突出显示匹配的正则表达式。但我的问题是，我想突出显示与要测试的字符串相同的输入结果。请找到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

在文本输入中突出显示匹配的正则表达式

回答

相关问题