页面加载时批量替换所有id为image*的元素内容的技术求助

现有代码仅能替换ID为image2的元素，需修改实现页面加载时，批量处理所有ID格式为image*的元素，将其中的Markdown图片语法（![描述](图片URL)）替换为指定样式的<img>标签。

修改后的代码 #

HTML代码 #

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<label class="control-label abc-control-label"  id="image3">![](https://i.imgur.com/pMRNwuY.png)</label>
<br>
<label class="control-label abc-control-label"  id="image2">![](https://i.imgur.com/ZE8HMqh.png)</label>
<br>
<label class="control-label abc-control-label" id="image1">![](https://i.imgur.com/P92SWSj.png)</label>
<br>
<img src="https://i.imgur.com/ZE8HMqh.png" style="width:200px">

JavaScript代码 #

function changeImages() {
    // 选中所有ID以image开头的元素
    const elements = document.querySelectorAll('[id^="image"]');
    
    elements.forEach(element => {
        const markdownContent = element.innerHTML.trim();
        // 匹配Markdown图片语法并提取URL
        const match = markdownContent.match(/!\[.*?\]\((.*?)\)/);
        
        if (match && match[1]) {
            const imgUrl = match[1];
            const newImg = `<img src="${imgUrl}" style="width:200px">`;
            element.innerHTML = newImg;
        }
    });
}

// 页面加载完成后执行替换
window.onload = changeImages;

核心改动说明 #

• 使用document.querySelectorAll('[id^="image"]')批量选中所有ID以image开头的元素，实现批量处理
• 遍历每个元素，对内容进行正则匹配，仅处理符合Markdown图片格式的内容
• 增加if (match && match[1])判断，避免因元素内容不符合格式导致代码报错
• 保留原有的图片样式设置（width:200px），确保替换后的图片样式统一

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