是否可以在不使用 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>.