如何在JavaScript字符串中通过alt标签替换指定img元素？

我正在使用一个工具包，它会将一段HTML内容字符串发送到我的webhook，我需要将其中的特定内容替换为其他文本。示例代码如下：

const x = `
<div dir="ltr">fifi<div><br></div>
  <div><br></div>
  <div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEcFPoHAAo1e7KR+MHvhg6PHwIjZvWTVNOvvH2+3kP1bO7mhPCuKXYKK5MAwrACJEACJOAeAhTeFN7umWlshQRIgARIgARIgARsToDCm8Lb5l8BDp8ESIAESIAESIAE3EOAwpvC2z0zja2QAAmQAAmQAAmQgM0JUHhTeNv8K8DhkwAJkAAJkAAJkIB7CFB4U3i7Z6axFRIgARIgARIgARKwOQEKbwpvm38FOHwSIAESIAESIAEScA8BCm8Kb/fMNLZCAiRAAiRAAiRAAjYnQOFN4W3zrwCHTwIkQAIkQAIkQALuIUDhTeHtnpnGVkiABEiABEiABEjA5gQovCm8bf4V4PBJgARIgARIgARIwD0EKLwpvN0z09gK9pWbcSvA01WdYa8nwCBAgQINCvBPpySO3L7603FKngLXj3hjr0GggQIECAwAot0J8Ca396r6WLUvAWvEvXlP4IECBAgACBjEBfCq196b1kPq7iDwvegnfxotIhAQIECBAgsHQCK2KYXRFf89J9Osv+rE4F7/8HxI8dO1ueh3UAAAAASUVORK5CYII=" alt="Screen Shot 2022-10-07 at 4.36.08 PM.png" width="335" height="483"><br></div>
</div>
`

其中的img元素对应一个Blob文件，实际内容更长，此处已简化。我打算通过已知的alt标签定位这段内容，但不确定如何将整个<img .....>标签替换为变量y。

提供两种可行方案，可根据HTML结构复杂度选择：

方案一：正则表达式匹配替换 #

适合结构简单、属性格式固定的HTML场景，通过已知alt属性值精准匹配整个img标签：

const targetAlt = "Screen Shot 2022-10-07 at 4.36.08 PM.png";
const y = "替换后的内容";

// 构建正则：兼容单/双引号、属性顺序变化
const regex = new RegExp(`<img[^>]*alt=(["'])${targetAlt}\\1[^>]*>`, "gi");
const processedHtml = x.replace(regex, y);

console.log(processedHtml);

说明：[^>]*匹配标签内除闭合符外的任意内容，(["'])捕获引号类型确保前后一致，gi标志实现全局匹配（忽略大小写可去掉i）。

方案二：DOM解析替换（更可靠） #

正则处理HTML易出现边缘错误，用DOM API解析是更稳妥的方案，完全遵循HTML规则：

const targetAlt = "Screen Shot 2022-10-07 at 4.36.08 PM.png";
const y = "替换后的内容";

// 创建临时容器加载HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = x;

// 定位目标img元素
const targetImg = tempContainer.querySelector(`img[alt="${targetAlt}"]`);
if (targetImg) {
  // 替换为纯文本：若y是HTML内容，改用 targetImg.outerHTML = y;
  targetImg.replaceWith(document.createTextNode(y));
}

// 获取处理后的HTML字符串
const processedHtml = tempContainer.innerHTML;
console.log(processedHtml);

说明：Node.js环境需引入jsdom库模拟DOM环境，浏览器环境可直接运行。

内容的提问来源于stack exchange，提问作者qaakmnd