Remove HTML tags in AngularJS using user defined Filters with example and Demo

Filters are used to modify the data in AngularJS. Here we create a custom filter to remove the HTML tags from a string. “removeHTMLTags” is the filter name. Used regular expression to strip the HTML tags from the given string.

Sample Code:

.filter('removeHTMLTags', function () {
    return function (text) {
      return text ? String(text).replace(/<[^>]+>/gm, '') : '';


Filters to remove HTML tags- AngularJS
Type HTML here..

Un-Trimmed Sting with HTML tags--> {{data.string}}

HTML Filtered text--> {{data.string | removeHTMLTags}}

Example Program:
  <title>Filters to remove HTML tags- AngularJS</title>
  <script src=""></script>
  <div ng-app="myApp" ng-controller="myController">
    <div><span>Un-Trimmed Sting with HTML tags--> </span><span>{{data.string}}</span></div>
    <div><span>HTML Filtered text--> </span><span>{{data.string | removeHTMLTags}}</span></div>
         var myApp = angular.module("myApp", []);
         .filter('removeHTMLTags', function () { //removeHTMLTags is the filter name
            return function (text) {
              return text ? String(text).replace(/<[^>]+>/gm, '') : ''; // used regular expression
          .controller('myController', function($scope) {
            $ = {
               string: '<div style="font-weight: bold;">I am a string with HTML tag including style attribute</div>',


mathan (not verified)
Thanks for sharing this useful information