有没有可能在不使用innerHTML的情况下将<a>标记替换为字符串中的href链接？

Question

我有一个JavaScript字符串，如下所示

const link = `
  Checkout My Cheat Sheet:

  <a target="_blank" href="https://tailwindcomponents.com/cheatsheet/"/>

  It's awesome
`;

我想将上面的文本转换为以下内容

const link = `
  Checkout My Cheat Sheet:

  https://tailwindcomponents.com/cheatsheet/

  It's awesome
`;

虽然我可以使用innerHTML，但我的文本可能包含其他脚本标记，这可能会导致XSS。

现在替换<a>标签对我来说就足够了。

有没有可能的字符串解决方案？

Answer 1

DOMParser可以安全地解析HTML字符串，而不会执行任何不安全的代码：

​

const link = `
  Checkout My Cheat Sheet:

  <a target="_blank" href="https://tailwindcomponents.com/cheatsheet/"></a>

  It's awesome
`;
const doc = new DOMParser().parseFromString(link, 'text/html');
for (const a of doc.querySelectorAll('a')) {
  a.replaceWith(a.href);
}
console.log(doc.body.innerHTML);

​

请注意，您确实需要<a>的结束标记。