点击按钮将textarea中的<img>标签替换为图片URL的实现方案

没问题，这事儿用JavaScript结合正则表达式就能轻松搞定，我给你整理了完整的可运行代码，还加了注释方便理解：

完整实现代码 #

<textarea> 
<img src="https://example.com/image1.gif" alt="image1" /></a> 
<img src="https://example.com/image2.gif" alt="image2" /></a> 
<img src="https://example.com/image3.gif" alt="image3" /></a> 
</textarea> 
<input type="submit" id="Button" value="Submit" />

<script>
// 获取按钮和文本域元素
const convertBtn = document.getElementById('Button');
const textArea = document.querySelector('textarea');

// 给按钮绑定点击事件
convertBtn.addEventListener('click', function() {
    // 读取文本域当前内容
    let originalContent = textArea.value;
    
    // 正则表达式：匹配所有<img>标签中的src属性值（兼容双引号包裹的情况）
    const srcMatchRegex = /<img[^>]+src="([^"]+)"/g;
    const extractedUrls = [];
    let matchResult;
    
    // 循环捕获所有匹配到的src URL
    while ((matchResult = srcMatchRegex.exec(originalContent)) !== null) {
        // matchResult[1]就是我们捕获到的URL字符串
        extractedUrls.push(matchResult[1]);
    }
    
    // 将URL数组转为换行分隔的字符串，替换文本域内容
    textArea.value = extractedUrls.join('\n');
});
</script>

关键细节说明 #

• 正则表达式逻辑：/<img[^>]+src="([^"]+)"/g 会精准定位<img>标签，并捕获src="..."里的URL内容：
  • <img[^>]+：匹配<img开头到标签结束前的所有内容
  • src="([^"]+)"：捕获双引号包裹的src属性值
• 扩展兼容：如果你的<img>标签可能用单引号或者无引号包裹src，可以把正则改成/src=(['"]?)([^'"\s]+)\1/g，这样能兼容更多写法
• 换行分隔：用join('\n')把提取到的URL按换行排列，和你期望的效果完全一致

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