0

我在 Angular 13 上使用 Ionic 6，并且我有一个 json 字符串，其中包含带有 html 代码的全文。我需要检查该字符串中的anchor标签和imgurl，并在需要时重写 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>"

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

  1. anchor扫描所有标签和标签的变量字符串img。

  2. 查看这些 url 中是否已经包含域名。

  3. 如果没有，请在这些 url 前添加域名前缀。

我尝试在 Typescript 中创建一个函数（或者可能更好地为此创建一个管道），但我无法完成这项工作。我遇到的第一个障碍是，当我尝试使用querySelectorAllor获取标签时getElementById，它不适用于字符串。我也尝试HTMLElement按照这里的一些建议声明它，但我无法继续。

你能帮我看看如何在 Angular Typescript 中做到这一点吗？

4

1 回答 1

1

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

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

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

于 2022-02-18T06:41:44.040 回答