Angular way to convert HTML-string to text string

Question

Currently I'm using

htmlToText(html: string) {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

for the task. What's the Angular way of doing that? Or is it perfectly fine to do like that? Can directly accessing document like that lead to problems, e.g. with mobile apps?

Note: There's an AngularJS related question, but I'm looking for an Angular2+ anwer. Plus I'm not sure whether the regex from that accepted answer is the way to go?

after 6 years more experience looking back at this question I'd say: It's fine like this. why would I create a pipe if it's for a one time usage? from an interop perspective I don't see problems. and tmp should be garbage collected, so no problem there either. — bersling
– bersling, Commented Apr 20, 2023 at 20:42

Mojtaba Nejad Poor Esmaeili · Accepted Answer · 2021-01-17 13:24:38Z

4

you should create a pipe like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'htmlToPlaintext'
})
export class HtmlToPlaintextPipe implements PipeTransform {
    transform(value: any): string {
        const temp = document.createElement('div');
        temp.innerHTML = value;
        return temp.textContent || temp.innerText || '';
    }
}

and use this pipe like this:

{{htmlCode | htmlToPlaintext}}

answered Jan 17, 2021 at 13:24

Mojtaba Nejad Poor Esmaeili

1,4141 gold badge15 silver badges19 bronze badges

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

1 Comment

nobalG Over a year ago

Hi, Can you please explain that how your answer is different from other answers of this page?

Adam · Accepted Answer · 2021-08-16 15:10:34Z

4

Create a pipe

    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({name: 'htmlToPlaintext'})
    export class HtmlToPlaintextPipe implements PipeTransform {
      transform(value: string): string {
        return value? value.replace(/]+>/gm, '') : '';
      }
    }

and use this pipe in your template

    {{yourAttribute | htmlToPlaintext}}

In Angular, you should not modify the dom directly from your component. It should always be possible to use the template to achieve what you want.

edited Aug 16, 2021 at 15:10

Adam

2,7661 gold badge33 silver badges29 bronze badges

answered Nov 16, 2017 at 9:06

Juli3n

2211 silver badge5 bronze badges

Comments

A.T. · Accepted Answer · 2023-06-19 09:14:13Z

1

@bersling I had a similar situation but I use a template variable to achieve the same.

      <p #desc
        class="[ hit hit__description ]"
        [innerHTML]="hit.shortText"
        [matTooltip]="desc.innerText"
        [matTooltipDisabled]="desc.innerText.length < 140"
      ></p>

answered Jun 19, 2023 at 9:14

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

1 Comment

Prashant Waghe Over a year ago

Exactly I was looking for.. thanks :)

G.Vitelli · Accepted Answer · 2017-11-16 09:08:12Z

0

What you need to do is escape these characters, then you archive what you want:

" replace with &quot;
& replace with &amp;
< replace with &lt;
> replace with &gt;

more about escape characters

XML / HTML / XHTML or any SGML derivat will not parse these characters as what they intended for.

answered Nov 16, 2017 at 9:08

G.Vitelli

1,28711 silver badges19 bronze badges

Comments

Nasim B. D · Accepted Answer · 2021-08-28 17:52:59Z

0

To render html as a string in Angular 2+, we can use the innerHTML property. For example:

<div [innerHTML]="htmlString"></div>

Or, have a look at this converter: https://www.npmjs.com/package//html-to-text

More information: Angular HTML binding

answered Aug 28, 2021 at 17:52

Nasim B. D

3212 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular way to convert HTML-string to text string

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related