如何替换/更新字符串中的特定 HTML 标记

Question

我有一个 SPFx 现代 webpart，使用 React 和 TypeScript。 我正在使用 Microsoft Graph API 从团队频道获取消息：

  this.context.msGraphClientFactory
    .getClient()
    .then((client: MSGraphClient): void =>{
      client
        .api(`/teams/${teamId}/channels/${channelId}/messages/delta`)
        .filter(maxPastDateFilter)
        .version("beta")
        .get((error, response: any, rawResponse?: any) => { ... }

我收到消息并可以显示它们，但我注意到一些消息中包含图像，这些图像也托管在团队聊天中，这称为“托管内容”。 在我收到的消息 (JSON) 中有一个属性body ，它有一个包含消息正文的子content以及指向这些hostedContent图像的链接。 这看起来像这样：

content:'<div><div><img alt="Sticker image, I CAN FIX IT" src="https://graph.microsoft.com/beta/teams/59b9b7d4-fd66-43cb-ae2b-03b4705f819f/channels/19:c73e19f4bb1841c9830f233d0d745eab@thread.skype/messages/1584028726132/hostedContents/aWQ9eF8wLXdldS1kMi05YjNhYWUxNGViY2Y2Njg5NzcyMTdmNGY2OTQxNzA0Zix0eXBlPTEsdXJsPWh0dHBzOi8vZXUtYXBpLmFzbS5za3lwZS5jb20vdjEvb2JqZWN0cy8wLXdldS1kMi05YjNhYWUxNGViY2Y2Njg5NzcyMTdmNGY2OTQxNzA0Zi92aWV3cy9pbWdv/$value" style="width:376px; height:251px"></div>\n</div>'

当我在我的 WebPart 中将此内容显示为 HTML 时，内容会呈现，但图像不会呈现，它们返回 401 未经授权的响应。 我相信没有发送所需的授权令牌。 我不确定为什么会发生这种情况，因为当前用户已登录并且应该有权访问该资源，但我猜它不会以这种方式工作，因为src属性不发送所需的身份验证承载令牌随着请求。

所以，为了获取图像，我发现有一个 API 调用来获取图像： https : //docs.microsoft.com/en-us/graph/api/chatmessagehostedcontent-get?view=graph-rest-beta&tabs =http嗯，它基本上是我需要调用的src属性中的 URL 值，然后我可以将接收到的图像转换为 BLOB 并使用它。

我的想法是使用graphClient进行 API 调用（如上例所示），将响应图像转换为 BLOB，然后通过将img标记的现有src属性替换为 BLOB-url 来显示它。

嗯，这几乎是上下文:-) - 所以问题是，我现在如何最好地解析这个字符串（代表 HTML）并替换所述img src属性？

Answer 1

感谢 Andreas 的提示，我能够实施一个解决方案。

这是一个例子（不使用图像标签，因为它有一个更复杂的逻辑来替换源）：

1st 创建一个临时 div 以使用标签：

    let temporalDivElement = document.createElement("div");
    temporalDivElement.innerHTML = message.content;

然后，在这个例子中，我搜索一个名为“附件”的标签，我找到了所有，遍历它们并用SPAN标签替换它们。

// Attachments
const attachmentTags: NodeListOf<HTMLImageElement> = temporalDivElement.querySelectorAll(`attachment`);
attachmentTags.forEach((attachmentTag) => {
  let attachmentRemovedLink = document.createElement("a");
  attachmentRemovedLink.innerText = "Attachment Replaced";
  attachmentRemovedLink.href = urlXy;
  attachmentTag.parentNode.replaceChild(attachmentRemovedLink, attachmentTag);
});

什么很酷，我现在最初没有，使用querySelectorAll您不仅可以通过标签名称选择内容，还可以实现更复杂的场景。

例如，使用此选择器，我可以选择包含特定src属性值的所有图像标签：

const imgTags: NodeListOf<HTMLImageElement> = temporalDivElement.querySelectorAll(`img[src*="/messages/${message.id}/hostedContents/"]`);