JavaScript如何批量替换HTML中图片链接为自有托管地址

核心逻辑 #

因为自有链接和原链接只有域名、路径前缀有差异，文件名完全一致，不需要做复杂的路径匹配，核心走两个步骤即可：

• 先把自有托管的图片列表处理成文件名: 自有完整链接的键值对映射，避免替换错位
• 遍历HTML内所有img标签，提取原src里的文件名，匹配映射表替换成对应自有链接即可

示例素材 #

原始待处理HTML片段

<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="asd" style="width:100%">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="asd" style="width:100%">

自有托管图片链接列表

HXXP://example.com/bbb/bbbbb/bbbb/123.jpg
HXXP://example.com/bbb/bbbbb/bbbb/456.jpg

可直接参考的Python实现（爬虫场景通用） #

用HTML解析库处理比纯字符串替换容错率高，不会误改其他属性内容：

from bs4 import BeautifulSoup
import os

# 替换为实际爬取到的原始HTML内容
raw_html = """
<img src="HXXP://domain.com/aaa/aaaa/aaa/123.jpg" alt="asd" style="width:100%">
<img src="HXXP://domain.com/aaa/aaaa/aaa/456.jpg" alt="asd" style="width:100%">
"""

# 替换为实际上传完成后得到的自有图片链接数组
self_hosted_urls = [
    "HXXP://example.com/bbb/bbbbb/bbbb/123.jpg",
    "HXXP://example.com/bbb/bbbbb/bbbb/456.jpg"
]

# 构建文件名-自有链接映射表
file_map = {}
for url in self_hosted_urls:
    filename = os.path.basename(url)
    file_map[filename] = url

# 解析HTML遍历替换
soup = BeautifulSoup(raw_html, "html.parser")
for img in soup.find_all("img"):
    original_src = img.get("src", "")
    if not original_src:
        continue
    original_filename = os.path.basename(original_src)
    if original_filename in file_map:
        img["src"] = file_map[original_filename]

# 最终输出替换完成的HTML
final_html = str(soup)

注意事项 #

• 不建议直接用字符串替换原域名/路径前缀的方式实现，容易误替换页面内其他非img标签内的同名字符串
• 如果页面内存在不同路径下同名图片的情况，可以把映射表的key从纯文件名改为「原链接去除域名后的完整路径」，避免匹配冲突
• 纯前端/JS场景实现逻辑完全一致：先构建文件名映射，再通过DOM选择器拿到所有img标签逐个替换src即可。

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