텍스트 입력에서 일치하는 정규식 강조 표시

정규식을 테스트하는 작동 코드가 있습니다. 일치하는 정규식을 강조 표시하십시오. 하지만 내 문제는 테스트 할 문자열과 동일한 입력에서 결과를 강조 표시하는 것입니다. 내가 가진 그 결과 및 예상 결과를 설명하는 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; 
}

다음, 용액에 내가 컨트롤러를 사용 :

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

텍스트 입력에서 일치하는 정규식 강조 표시

답변

관련 문제