Question

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

Answer 1

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操作，因此最好通过指令来完成。

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

1 个答案: