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

Question

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

Martin Jaskulla · Accepted Answer · 2021-02-15 16:25:11Z

2

You can use DomParser for this

const dom = new DOMParser().parseFromString('<h1>Hi</h1>','text/html')
const h1 = dom.querySelector('h1')
h1.setAttribute('hidden', 'true')
console.log(h1) // <h1 hidden="true">Hi</h1>

answered Feb 15, 2021 at 16:25

Martin Jaskulla

4825 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benny Halperin · Accepted Answer · 2021-02-15 16:27:01Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related