angularjs to output plain text instead of html

Question

I have some text like this:

<span>My text</span>

I want to display without tags:

My text

I also don't want to apply the tags, I want to strip them. What's an easy way to do that?

Angular html:

<div>{{myText | htmlToPlaintext}}</div>

You have tagged this under AngularJS, so I assume you want to do display the text using AngularJS. If so, is this text in a model? Which html tag are you using to display the contents of the model? — callmekatootie
– callmekatootie, Commented Jun 25, 2013 at 5:44
@callmekatootie I created a filter based on the answer Abhishek gave. — Harry
– Harry, Commented Jun 25, 2013 at 5:56
I see that and his solution uses jQuery - You have tagged this under AngularJS and I have a feeling that you you can do it in AngularJS without using jQuery, if only you can give more information in your question - particularly where you wish to display the text in your view... — callmekatootie
– callmekatootie, Commented Jun 25, 2013 at 6:16
@callmekatootie I added an example of what I'm doing in angular — Harry
– Harry, Commented Jun 25, 2013 at 7:05

Elan Hasson · Accepted Answer · 2015-08-10 15:03:45Z

209

jQuery is about 40 times SLOWER, please do not use jQuery for that simple task.

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

usage :

var plain_text = htmlToPlaintext( your_html );

With angular.js :

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

use :

<div>{{myText | htmlToPlaintext}}</div>

edited Aug 10, 2015 at 15:03

Elan Hasson

1,2701 gold badge19 silver badges29 bronze badges

answered Jun 26, 2013 at 8:47

Utopik

3,7831 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

blockloop Over a year ago

I actually prefer String(text).replace(/<[^>]+>/gm, ''). I've been using it for years without any issues.

Blaise Over a year ago

jQuery is 40 times slower, but you still get 8000 ops/s, so not using jQuery for that reason is premature optimization.

Blaise Over a year ago

I would never add a jQuery dependency just to convert html to text, but if my project already used jQuery I would choose the jQuery solution because I consider a custom-written regular expression less readable, less tested and less reliable. Does your regular expression protect against all possible forms of XSS?

Bogdan Over a year ago

using the DOM engine covers a lot more cases that this simple replace those not example: some codes here   

Björn Over a year ago

You should probably add a null-check in there, or it will output "null": return text ? String(text).replace(/<[^>]+>/gm, '') : "";

|

Dan Beaulieu · Accepted Answer · 2016-02-09 16:25:34Z

21

from https://docs.angularjs.org/api/ng/function/angular.element

angular.element

wraps a raw DOM element or HTML string as a jQuery element (If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite.")

So you simply could do:

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return angular.element(text).text();
    }
  }
);

Usage:

<div>{{myText | htmlToPlaintext}}</div>

edited Feb 9, 2016 at 16:25

Dan Beaulieu

20k19 gold badges107 silver badges138 bronze badges

answered Jun 4, 2014 at 19:41

Davy R

3292 silver badges4 bronze badges

8 Comments

jake Over a year ago

I would avoid this approach as well; might not take as long as full jQuery, but certainly much slower than accepted answer.

Chris Jacob Over a year ago

I suggest wrapping your text in an element otherwise a plain old string like "hi" will return an empty string angular.element('<div>'+text+'</div>').text();

Jordan Over a year ago

if you're in the link function of a directive you can simply do element.text() 0.o

Bri Bri Over a year ago

I prefer this solution to using a regex, at least in cases where speed isn't critical. It's more correct and will actually convert the html to plain text, extraneously less than signs, special entities and all.

codelearner Over a year ago

How to show the preview ,instead of showing the plain text(it is working). but i need to show the preview like stack overflow shows while posting question or answer including images also

|

ajshort · Accepted Answer · 2016-03-09 07:27:33Z

4

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

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

<p>{{DetailblogList.description | htmlToPlaintext}}</p>

edited Mar 9, 2016 at 7:27

ajshort

3,7745 gold badges32 silver badges43 bronze badges

answered Mar 9, 2016 at 7:08

Khyati Acharya

411 bronze badge

4 Comments

winner_joiner Over a year ago

add some formating an some insights to the code, that helps to generate better answers.

Johannes Jander Over a year ago

Please add some explanation. Your answer is currently flagged "low quality" and might eventually be removed.

twernt Over a year ago

There's a difference between a low-quality answer that should be voted down and a non-answer that should be deleted. Please see You're doing it wrong: A plea for sanity in the Low Quality Posts queue.

codelearner Over a year ago

How to show the preview ,instead of showing the plain text(it is working). but i need to show the preview like stack overflow shows while posting question or answer including images also

Olivier C · Accepted Answer · 2015-12-08 14:05:49Z

3

You want to use the built-in browser HTML strip for that instead of applying yourself a regexp. It is more secure since the ever green browser does the work for you.

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return stripHtml(text);
    };
  }
);

var stripHtml = (function () {
  var tmpEl = $document[0].createElement("DIV");
  function strip(html) {
    if (!html) {
      return "";
    }
    tmpEl.innerHTML = html;
    return tmpEl.textContent || tmpEl.innerText || "";
  }
  return strip;
}());

The reason for wrapping it in an self-executing function is for reusing the element creation.

answered Dec 8, 2015 at 14:05

Olivier C

1,19510 silver badges12 bronze badges

2 Comments

codelearner Over a year ago

How to show the preview ,instead of showing the plain text(it is working). but i need to show the preview like stack overflow shows while posting question or answer including images also

Allen Hamilton Over a year ago

changed $document[0] to document and it worked for me! Thank you

Prasanna · Accepted Answer · 2017-07-26 05:52:50Z

3

<div ng-bind-html="myText"></div> No need to put into html {{}} interpolation tags like you did {{myText}}.

and don't forget to use ngSanitize in module like e.g. var app = angular.module("myApp", ['ngSanitize']);

and add its cdn dependency in index.html page https://cdnjs.com/libraries/angular-sanitize

edited Jul 26, 2017 at 5:52

answered Jul 26, 2017 at 5:44

Prasanna

1,7532 gold badges16 silver badges29 bronze badges

Comments

Hung Vu · Accepted Answer · 2017-04-13 00:35:19Z

0

You can use ng-bind-html, don't forget to inject $sanitize service into your module Hope it helps

answered Apr 13, 2017 at 0:35

Hung Vu

5,9642 gold badges32 silver badges27 bronze badges

Comments

Sandip Jana · Accepted Answer · 2017-01-03 10:30:53Z

-3

Use ng-bind-html this is only proper and simplest way

answered Jan 3, 2017 at 10:30

Sandip Jana

1

1 Comment

mmushtaq Over a year ago

Welcome to Stack Overflow. Please add more details for clarification. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the OP.

pixelbyaj · Accepted Answer · 2016-06-08 04:00:36Z

-7

Use this function like

 String.prototype.text=function(){
   return this ? String(this).replace(/<[^>]+>/gm, '') : '';
 }

  "<span>My text</span>".text()
  output:
  My text

Fiddle

edited Jun 8, 2016 at 4:00

answered Jun 25, 2013 at 5:09

pixelbyaj

1,1781 gold badge9 silver badges24 bronze badges

4 Comments

RevNoah Over a year ago

This is a jQuery-based solution. The question was about angularjs.

pixelbyaj Over a year ago

Rev The mark answer is javascript and if I did it using jquery what make it difference

Ibrahim Lawal Over a year ago

Your solution is not compatible with OP's requirements. he already built his app on angularjs. jquery is a different framework.

Marecky Over a year ago

+1 and I don't see here any jQuery... wtf? Another problem is @Abjo's method extends build in String prototype. That some developers choose to be angry about.

Collectives™ on Stack Overflow

angularjs to output plain text instead of html

8 Answers 8

With angular.js :

13 Comments

8 Comments

4 Comments

2 Comments

Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

With angular.js :

13 Comments

8 Comments

4 Comments

2 Comments

Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related