How to remove html tags from text in angular 2

Question

I am working with rss feed and got rss feed from my server so i am sending stringfy data but when i bind this in my angular 2 application it shows text with html tags so how we can remove this tags. I just want to show text only.

Here is server code:

exports.newspage=function(req,resp){
db.executeSql("select header,text,teaser from news_d",function(data,err){
        if(err){
            resp.writeHead(200,{"Content-Type":"text/html"});
            resp.write("<html><head><title>500</title></head></html>");
        }
        else{
            resp.writeHead(200,{"Content-Type":"x-application/json"});
            resp.write(JSON.stringify(data));
        }
        resp.end();
    });
};

app.get('/newspage', function(req, resp) {

    emp.newspage(req,resp);

});

service.ts:

gettagesnews(){
     let headers = new Headers();
       headers.append('x-access-token',this.token);
         var options = new RequestOptions({headers: headers});
      return this.http.get('http://services.com:9000/newspage/',options).map((res:Response) => res.json())
    .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

news.ts:

tagesnews:Array<TagesnewsList>;

this.newsauth.gettagesnews().subscribe((dailynews)=>{
    this.tagesnews=dailynews;
  });

html:

<div *ngFor="let daily of tagesnews">
       <span style="font-size: 13px">{{daily.text}}</span> </button>
    </div>

i got response with some like this:

sample text

Do you want the html to render? or do you just want them taken out of the html? — epascarello
– epascarello, Commented Mar 21, 2017 at 14:28
This might help: Angularjs to output plain text instead of html — Brmmmm
– Brmmmm, Commented Mar 21, 2017 at 14:33

Igor Janković · Accepted Answer · 2017-03-21 14:28:09Z

21

You just need to bind html:

<div *ngFor="let daily of tagesnews">
   <span style="font-size: 13px" [innerHTML]="daily.text"></span>
</div>

answered Mar 21, 2017 at 14:28

Igor Janković

5,5326 gold badges34 silver badges47 bronze badges

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

4 Comments

U rock Over a year ago

Is it safe [innerHTML] really.

Wiil Over a year ago

Yes, it is. Angular does send the innerHTML data through a sanitization process angular.io/guide/security#sanitization-and-security-contexts

Gaurav_0093 Over a year ago

nice and cleanest answer.

rahularyansharma Over a year ago

but that will render the HTML tags also , may be it served her purpose but question titile was how to remove html tags.

Serj Sagan · Accepted Answer · 2020-01-04 09:21:33Z

3

All of the [innerHTML] answers have the content of the HTML actually rendered... so images are loaded, etc. well if you don't want that, and just the text... you can use a conversion method like this:

stripHtml(html: string) {
    var div = document.createElement("DIV");

    div.innerHTML = html;

    let cleanText = div.innerText;

    div = null; // prevent mem leaks

    return cleanText;
}

answered Jan 4, 2020 at 9:21

Serj Sagan

30.6k17 gold badges159 silver badges190 bronze badges

Comments

Codemaker2015 · Accepted Answer · 2020-10-16 08:54:30Z

2

Use replace method with regx to remove the unwanted patterns from the content.

content.replace(/<[^>]*>/g, '\n')

answered Oct 16, 2020 at 8:54

Codemaker2015

16k9 gold badges118 silver badges93 bronze badges

1 Comment

David Conrad Over a year ago

This will fail if there is a close angle bracket inside an attribute or a comment.

Nagender Pratap Chauhan · Accepted Answer · 2019-11-19 07:12:27Z

1

There are two ways to handle it.

1) use the innerHTML tag in your html file like this =

<div>
      <pre [innerHTML]="description"></pre>
</div>

here, description is field which hold the data with html tags(<div>hi<br></br></div>)

2) Second way is that convert your html tags data in plain string then bind with respective form control.

like :- formData['description'] = formData['description'].replace(/<[^>]*>/g, '');

answered Nov 19, 2019 at 7:12

Nagender Pratap Chauhan

2,23417 silver badges18 bronze badges

Comments

kithekadk · Accepted Answer · 2023-03-20 08:57:33Z

0

Incase you are working with an array and the array contains html tags the easiest way to do it is as below. This might help someone who is having the text with html tags rendered from an array

<div *ngFor="let daily of tagesnews; let i = index">
    <span [innerHTML]="arrayName[i]"></span>
</div>

answered Mar 20, 2023 at 8:57

kithekadk

11 bronze badge

Collectives™ on Stack Overflow

How to remove html tags from text in angular 2

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related