Angular way to convert HTML-string to text string

user_3022127 0
Viewed 8545

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 can 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?

angular
4 Answers

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.

user_16596240

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}}
user_103361550
user_142044520

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

" replace with "
& replace with &
< 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.

user_87573500
Related