如何检查和重写 Typescript 字符串中的所有 URL - Angular

Question

我在 Angular 13 上使用 Ionic 6，我有一个 json 字符串，其中包含带有 html 代码的全文。我需要检查该字符串中的 anchor 标签和 img url，并在需要时重写 url 域名。

例如，我想要这个 fulltext:string 变量：

fulltext:string = 
"<p>This is the intro text</p>
<ul>
<li><a href="downloads/category/886-download-pdf">PDF 1 <img src="images/886-download-pdf.jpg" /></a></li>

<li><a href="downloads/category/887-download-pdf">PDF 2 <img src="images/887-download-pdf.jpg" /></a></li>

<li><a href="https://website.com/downloads/category/888-download-pdf">PDF 3 <img src="https://website.com/images/888-download-pdf.jpg" /></a></li>
</ul>"

成为：

"<p>This is the intro text</p>
<ul>
<li><a href="https://website.com/downloads/category/886-download-pdf">PDF 1 <img src="https://website.com/images/886-download-pdf.jpg" /></a></li>

<li><a href="https://website.com/downloads/category/887-download-pdf">PDF 2 <img src="https://website.com/images/887-download-pdf.jpg" /></a></li>

<li><a href="https://website.com/downloads/category/888-download-pdf">PDF 3 <img src="https://website.com/images/888-download-pdf.jpg" /></a></li>
</ul>"

据我目前的了解，我认为我需要执行以下操作：

扫描所有 anchor 标签和 img 标签的变量字符串。
看看这些url里面是不是已经有域名了
如果没有，请在这些 url 前添加域名前缀。

我尝试在 Typescript 中创建一个函数（或者可能更好地为此创建一个管道），但我无法完成此操作。我遇到的第一个障碍是，当我尝试使用 querySelectorAll 或 getElementById 获取标签时，它不适用于字符串。我还尝试根据此处的一些建议将其声明为 HTMLElement，但我无法继续。

你能帮我看看如何在 Angular Typescript 中完成吗？

Answer 1

这是我带来的：https://stackblitz.com/edit/plain-angular6-htjxrv

我通过拆分原始文本创建了旧 hrefs 和 srcs 的结束值数组，然后通过将您的预期路径添加到旧 hrefs 和 srcs 数组的内容来构建新 href 和 src 值的数组。最后，将文本中的旧 href 和 src 值替换为新值数组中的元素。

我敢肯定它可以以不同的方式完成，但我认为当您查看代码时这已经足够清楚了。

如何检查和重写 Typescript 字符串中的所有 URL - Angular

How to check and rewrite all URLs inside a Typescript String - Angular

ionic-framework

angular

angular12

angular13

ionic6