What the right way unescape html entities in Angular?

Question

I get html entities from json file, like: ’ How can I unescape it in html component?

I created custom pipe, but it works only for entities like &:

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

@Pipe({
  name: 'unescape'
})
export class UnescapePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return unescape(value);
  }

}

I'm working with Angular 5.

Related [Unescape HTML entities in JavaScript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — Liam, Mar 29 '22 at 08:54

score 9 · Answer 1 · answered Nov 20 '17 at 06:33

The solution, create next custom pipe:

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

@Pipe({
  name: 'unescape'
})
export class UnescapePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    const doc = new DOMParser().parseFromString(value, 'text/html');
    return doc.documentElement.textContent;
  }

}

score 1 · Answer 2 · edited May 10 '21 at 22:26

1

Still the same : use replace or encodeUri of JavaScript and escape every chars you don't want. The other way is to create a Pipe like you are doing based on regex/replace/escape functions ;)

escape(htmlInput) { 
    htmlInput.replace("&amp;", "and")
}

escape is now encodeUri and you can also use contains to verify first if you have a matched pattern :)

edited May 10 '21 at 22:26

Robert

7,394
40
45
64

answered Nov 19 '17 at 14:39

andrea06590

1,259
3
10
22

This doesn't appear to be relevant to the question. The question isn't how to escape a url, it's how to *un*escape it. – EJoshuaS - Stand with Ukraine May 10 '21 at 16:01

What the right way unescape html entities in Angular?

2 Answers2

Linked

Related