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, Apr 20 '23 at 20:42

score 4 · Answer 1 · edited Aug 16 '21 at 15:10

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.

score 4 · Answer 2 · answered Jan 17 '21 at 13:24

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 '21 at 13:24

Mojtaba Nejad Poor Esmaeili

700
1
6
12

1

Hi, Can you please explain that how your answer is different from other answers of this page? – nobalG Jan 17 '21 at 13:27

score 0 · Answer 3 · answered Aug 28 '21 at 17:52

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 '21 at 17:52

Nasim B. D

161
1
6

score 0 · Answer 4 · answered Jun 19 '23 at 09:14

@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>

score -1 · Answer 5 · answered Nov 16 '17 at 09:08

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.

Angular way to convert HTML-string to text string

5 Answers5