Angular how to convert a text string to html objects in typescript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Angular how to convert a text string to html objects in typescript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Under my Angular app :

i ve a string like the following :

let mystr : "<p>Ceci c'est un texte aléatoire de test <a href='https://codemirror.net' title='https://codemirror.net' target='_blank'>ceci c'est un simple HYPERLINK</a> Ceci c'est un autre texte aléatoire de test Ceci c'est un autre texte aléatoire de test <a title='' target='_blank' href='http://testing.com/book.html?default=<script>alert(document.cookie)</script>'>Un autre hyperlink </a></p><p>Ceci c’est un hyperlink copié sur la même page:</p><p><a href='https://aaa.bb.tes.com/aide-et-support/fiche-assistance/31516/une-page-grise-saffiche-a-louverture-dun-fichier-excel-2010' title='se rendre sur la page Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010'><span style='color:blue;'>Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010</span></a></p>"

My purpose , is how to convert that string to html objects and manipulate them in typescript

(beofre appending them to the DOM with innerHtml)

And then be able to modify them before displaying in the view ;

For example i want to change all the titles attributes of all tags within that string

Answer

You can for example:

const mystr : "<p>Ceci c'est un texte aléatoire de test <a href='https://codemirror.net' title='https://codemirror.net' target='_blank'>ceci c'est un simple HYPERLINK</a> Ceci c'est un autre texte aléatoire de test Ceci c'est un autre texte aléatoire de test <a title='' target='_blank' href='http://testing.com/book.html?default=<script>alert(document.cookie)</script>'>Un autre hyperlink </a></p><p>Ceci c’est un hyperlink copié sur la même page:</p><p><a href='https://aaa.bb.tes.com/aide-et-support/fiche-assistance/31516/une-page-grise-saffiche-a-louverture-dun-fichier-excel-2010' title='se rendre sur la page Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010'><span style='color:blue;'>Une page grise s’affiche à l’ouverture d’un fichier – Excel 2010</span></a></p>"
    
    const el = document.createElement('div');
    el.innerHTML = mystr;
    const allA = el.querySelectorAll('a');
    
    allA.forEach(a => console.log(a.getAttribute('title')));

and so forth…

We are here to answer your question about Angular how to convert a text string to html objects in typescript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji