user1283776 user1283776 - 20 days ago 5
AngularJS Question

Escape html and whitespace?

User input is saved in

$scope.userInput
. I want to check if the user has entered anything in the input, but I want to ignore whitespace and HTML tags, and check only for other kinds of input.

How can I do that?

Answer
// Input string
$scope.userInput = "<h1>My input</h1>";

// Removed HTML tags from the string.
var removedTagStr = $scope.userInput.replace(/(<([^>]+)>)/ig,'');

// Removed the white spaces from the string.
var result = removedTagStr.replace(/ /g,'');

console.log(result); // Myinput

Explanation of the regular expression (<([^>]+)>) :

----------------------------------------------------------------------
(                        group and capture to \1:
----------------------------------------------------------------------
<                        '<'
----------------------------------------------------------------------
(                        group and capture to \2:
----------------------------------------------------------------------
[^>]+                    any character except: '>' (1 or more
                         times (matching the most amount
                         possible))
----------------------------------------------------------------------
)                        end of \2
----------------------------------------------------------------------
>                        '>'
----------------------------------------------------------------------
)                        end of \1
----------------------------------------------------------------------
)                        end of grouping
----------------------------------------------------------------------

Working Demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.userInput = "<h1>My input</h1>";

var removedTagStr = $scope.userInput.replace(/(<([^>]+)>)/ig,'');

$scope.result = removedTagStr.replace(/ /g,'');

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  {{result}}
</div>