regex test

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular-sanitize.js"></script>
<div ng-app="regexApp" ng-controller="MainController">
<div class="pattern-style">/<input ng-style="inputStyle" ng-keyup="keyUpHandler()" ng-model="data.pattern" >/
  i:<input type="checkbox" ng-model="data.i">
  g:<input type="checkbox" ng-model="data.g">
  m:<input type="checkbox" ng-model="data.m"></div><br>
  Text:<br>
  <textarea ng-model="data.text" rows="10" cols="50"></textarea><br>
  <button ng-click="matchClicked()">Match</button>
  <br>
  <div>
  Result:<br>
  search:{{data.searchResult}}<br>
  test:{{data.testResult}}
  </div>
  <div ng-bind-html="opText">{{opText}}</div>
</div>

CSS

.match{
  background-color:blue;
  color:white;
  border: 1px solid cyan;
  border-radius:5px;
  padding:2px;
}
.pattern-style{
  font-weight:bold;
  font-size:16px;
  font-family:monospace;
}
.pattern-style input{
  background-color: transparent;
  border: 0px solid;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  color:blue;
  font-family:monospace;
  outline: none;
}
.pattern-style input:focus{
  outline: none;
  
}

JavaScript

var app = angular.module("regexApp",["ngSanitize"]);

app.controller("MainController", function($scope){
	$scope.data = {text:"", pattern:"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"};
  $scope.inputStyle = {"width":"50px"};
  $scope.keyUpHandler = function(){
  	var width =$scope.data.pattern.length*9 + 6;
    if(width>300){
    	width = 300;
    }
  	$scope.inputStyle.width = width + "px"
    console.log($scope.inputStyle.width);
  }
  $scope.matchClicked = function(){
  	var data = $scope.data;
    var optionStr = "";
    $scope.opText = "";
    if(data.i)
    	optionStr+="i";
    if(data.g)
    	optionStr+="g";
    if(data.m)
    	optionStr+="m";
    var regEx = new RegExp(data.pattern, optionStr)
    $scope.data.searchResult = data.text.search();
    $scope.data.testResult = regEx.test(data.text);
    var splitArr = data.text.split(regEx);
    var matchArr= data.text.match(regEx);
    console.log(splitArr)
    console.log(matchArr)
    //var matchArr= regEx.exec(data.text);
    /*$scope.opText = splitArr[0];
    for(var index = 1; index < splitArr.length; index++){
    	if(index <= matchArr.length){
    		$scope.opText += "<span class='blue' >" + matchArr[index-1] + '</span>';
      }
    	$scope.opText+= splitArr[index];
    }*/
    $scope.opText = data.text;
    var text = data.text;
    var opText = "";
    var pos;
    var lastPos = 0;
    if(matchArr){
      for(var index = 0; index < matchArr.length; index++){
        pos = text.indexOf(matchArr[index], lastPos);
        opText += text.substring(lastPos, pos);
        opText += "<span class='match' >" + matchArr[index] + '</span>'
        lastPos = pos + matchArr[index].length;
      }
      opText += text.substring(lastPos, text.length);
    }
    console.log(opText);
    $scope.opText = opText.replace(/\r\n/g, '<br />').replace(/[\r\n]/g, '<br />');
    console.log($scope.opText)
  }
});