Question

在我的 Angular 应用下：

我有一个像下面这样的字符串：

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

我的目的是如何将该字符串转换为 html 对象并在打字稿中操作它们

（之前使用 innerHtml 将它们附加到 DOM）

然后可以在视图中显示之前修改它们;

例如，我想更改该字符串中所有标签的所有标题属性

Answer 1

您可以为此使用 DomParser

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>

Answer 2

例如，您可以：

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')));

等等...

Angular 如何在打字稿中将文本字符串转换为 html 对象

2 个答案: