Angular: display unicode characters from API text in innerHTML

Question

API :

{
  "id": 1,
  "text": "<p>\r\n    \\u2022\r\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit: <br />\r\n    sed do eiusmod <br />\r\n    tempor incididunt ut <br />\r\n    labore et dolore magna aliqua\r\n</p>\r\n<p>\r\n    \\u2022\r\n </p>"
}

HTML :

<div [innerHTML]="agreementData.text"></div>

when I try to display like this Unicode characters like \u2022 display same as \u2022, it doesn't convert in anything, I cant change API I need to handle requests like this

Does this answer your question? [Unicode characters in Angular binding](https://stackoverflow.com/questions/54927854/unicode-characters-in-angular-binding) — Eldar, Sep 21 '22 at 10:07
when log text in pipe its like this :
\u2022 Lorem ipsum dolor sit amet, consectetur adipiscing elit:
sed do eiusmod
tempor incididunt ut
labore et dolore magna aliqua — Sandrex Kharitonashvili, Sep 21 '22 at 11:32

score 0 · Accepted Answer · answered Sep 21 '22 at 12:52

found solution pipe:

@Pipe({
    name: 'unicodeStringFormat',
})
export class UnicodeFormatPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        return value.replace(/\\u[\dA-Fa-f]{4}/g, match => {
            return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
        });;
    }
}

HTML:

<div [innerHTML]="agreementData.text | unicodeStringFormat"></div>

Angular: display unicode characters from API text in innerHTML

1 Answers1