这篇文章专门针对UEditor的内容结构，从基础逻辑讲起：先帮你理清UEditor输出内容的HTML格式，再一步步教你用JS定位img标签、提取src属性——不管是单张图片快速获取，还是批量导出所有图片地址，都有详细的代码示例和避坑提示。哪怕是刚接触JS的新手，跟着步骤走也能快速上手，再也不用为提取UEditor里的图片地址费力气。
读完你会发现，原来只需要几行简单代码，就能把之前头疼的“图片地址提取”变成顺手的小事~
你有没有过这种情况？做企业官网内容维护时，运营同学用UEditor写完一篇带图的新闻稿，你要把里面的图片单独提出来做CDN加速；或者做电商商品描述，需要把UEditor里的商品图地址批量导出到Excel——可对着编辑器里的内容，要么手动一个个复制img标签的src，眼睛都看花；要么盯着一堆HTML代码发呆，不知道怎么用JS快速提取？
我去年帮一个做本地生活服务平台的朋友解决过一模一样的问题。他负责平台的商户详情页，每天要处理20+条用UEditor编辑的商户介绍，里面的图片地址全靠手动复制，光这一步就占了他每天1/3的工作时间。后来我用JS写了几行代码，帮他实现了“点一下按钮就导出所有图片地址”，他当时拍着桌子说：“这比喝奶茶还爽！”今天就把这套连新手都能学会的JS提取方法分享给你，不用懂复杂的正则，不用查一堆API文档，跟着走就能搞定。
先搞懂：UEditor的内容到底“藏”在哪？
要提取图片地址，得先明白UEditor的内容结构——其实它本质是个“HTML字符串生成器”。不管你在编辑器里插图片、写文字还是调格式，最终都会被转换成带标签的HTML内容。比如你在UEditor里插入一张“奶茶店环境图”，编辑器后台的内容会是这样：
这家奶茶店的环境超舒服～
而我们要找的图片地址，就藏在img标签的src属性里。
那怎么拿到这个HTML内容？UEditor给了个现成的方法——getContent()。比如你的编辑器容器ID是editor（就是里的id），用下面这行代码就能拿到完整内容：
var editorContent = UE.getEditor('editor').getContent();我得提醒你：别用getPlainTxt()！这个方法会把HTML标签全去掉，只能拿到纯文字，图片地址肯定找不到——我之前帮朋友调试时，他一开始误用了这个方法，结果输出的内容里全是“[图片]”，差点崩溃。
手把手教你：3步用JS提取图片地址
搞懂内容结构后，接下来的操作就像“从一碗粥里挑出红枣”——定位目标（img标签）、取出核心（src属性）、处理细节（比如相对路径或base64）。下面一步步讲，每一步都附可直接复制的代码和避坑提示。
第一步：把HTML字符串“变”成可操作的DOM对象
你拿到的editorContent是个字符串，就像一张写满字的纸，没法直接“点”里面的img标签。这时候得用DOMParser（浏览器自带的HTML解析器）把它转成真实的DOM对象——就像把纸变成一本可以翻页的书，每一页（标签）都能单独操作。
代码长这样：
// 获取UEditor的HTML内容
var editorContent = UE.getEditor('editor').getContent();
//
解析HTML字符串为DOM对象
var parser = new DOMParser();
var doc = parser.parseFromString(editorContent, 'text/html');
//
找到所有img标签
var imgElements = doc.getElementsByTagName('img');
这里要注意：DOMParser是浏览器原生API，不用引任何插件，IE10及以上都支持——我帮朋友做的时候，他的项目用的是IE11，亲测没问题。如果你的项目要兼容更老的浏览器（比如IE9），可以用createElement创建一个div，把内容放进去再找img标签，比如：
var tempDiv = document.createElement('div');
tempDiv.innerHTML = editorContent;
var imgElements = tempDiv.getElementsByTagName('img');
两种方法选一个就行，效果一样。
第二步：从img标签里“抠”出src地址
找到所有img标签后，下一步就是把每个标签的src属性“拿”出来。这一步像“摘葡萄”——遍历所有img元素，把每个的src放进数组里就行。
代码超简单：
var imgUrls = []; // 用来存图片地址的数组
for (var i = 0; i < imgElements.length; i++) {
var src = imgElements[i].getAttribute('src'); // 用getAttribute更稳妥
if (src) { // 避免空src的情况
imgUrls.push(src);
}
}
// 输出结果，比如打印到控制台
console.log('提取的图片地址：', imgUrls);
// 或者显示在页面上
document.getElementById('img-list').innerHTML = imgUrls.join('
');
这里要划个重点：为什么用getAttribute(‘src’)而不是直接imgElements[i].src？ 我之前踩过坑——如果img的src是相对路径（比如./images/tea.jpg），直接用img.src会自动转成绝对路径（比如https://your-domain.com/images/tea.jpg）；而用getAttribute能拿到原始的src值。如果你需要原始路径（比如做路径替换），一定要用getAttribute；如果需要可直接访问的绝对路径，用img.src更方便。
举个例子：朋友的平台里，商户上传的图片一开始存在本地服务器，src是/upload/202405/tea.jpg，后来迁移到CDN，需要把/upload/改成https://cdn.example.com/upload/——这时候用getAttribute拿到原始路径，再做字符串替换，比直接用绝对路径方便多了。
第三步：处理“特殊情况”——别让这些问题卡你
实际项目里，你可能会遇到几种“不按常理出牌”的图片地址，比如base64格式、相对路径、或者带时间戳的临时地址。我把这些情况整理成了“问题-解决表”，你对照着处理就行：
| 问题类型 | 表现形式 | 解决思路 | 代码示例 |
|---|---|---|---|
| 相对路径 | src=”./images/tea.jpg”或/src/upload/tea.jpg | 用location.origin拼接成绝对路径 | var absoluteSrc = location.origin + src; |
| base64格式 | src=”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE…” | 转成Blob对象（用于上传）或直接保存 | var blob = base64ToBlob(src); // 需要写base64转Blob的函数 |
| 临时地址 | src=”https://temp.example.com/tea.jpg?timestamp=123456″ | 去掉查询参数（用URL对象处理） | var url = new URL(src); var cleanSrc = url.origin + url.pathname; |
我帮朋友处理的时候，他遇到最多的是相对路径转绝对路径的问题——他们的UEditor上传图片时，默认存到服务器的/upload/目录，src是/upload/202405/123.jpg，直接用这个路径在前端显示会报错（因为缺少域名）。后来我加了一行location.origin + src，直接把路径拼成https://their-domain.com/upload/202405/123.jpg，完美解决。
再比如base64格式的图片——有些运营同学会直接把本地图片复制到UEditor里，这时候图片会被转成base64字符串。如果需要把这些图片上传到CDN，就得把base64转成Blob对象。我写了个简单的转换函数，你可以直接用：
function base64ToBlob(base64Str) {
var arr = base64Str.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
朋友用这个函数把base64图片转成Blob后，直接通过接口上传到了他们的CDN，再也不用让运营同学重新上传图片了。
最后一步：把代码变成“能用的工具”
光会写代码还不够，得让非技术的同事也能用——比如给UEditor加个“导出图片地址”的按钮，点一下就把地址列出来，甚至下载成TXT。我帮朋友做的时候，就在编辑器下面加了个按钮，代码大概是这样：
<!-编辑器容器 >
<!-
导出按钮和结果显示区 >
function exportImgUrls() {
//
获取UEditor内容
var editor = UE.getEditor('editor');
var content = editor.getContent();
//
解析HTML并找img标签
var parser = new DOMParser();
var doc = parser.parseFromString(content, 'text/html');
var imgs = doc.getElementsByTagName('img');
//
提取src并处理相对路径
var imgUrls = [];
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].getAttribute('src');
if (src) {
// 处理相对路径
if (src.startsWith('./') || src.startsWith('/')) {
src = location.origin + src;
}
imgUrls.push(src);
}
}
//
显示结果
var resultDiv = document.getElementById('img-result');
resultDiv.innerHTML = '
提取到' + imgUrls.length + '张图片：
' + imgUrls.join('
') + '';
//
可选：下载成TXT文件
var blob = new Blob([imgUrls.join('n')], { type: 'text/plain' });
var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = '图片地址.txt';
a.innerHTML = '点击下载TXT';
resultDiv.appendChild(a);
}
朋友把这个按钮加到后台后，运营同学再也没找他要过“图片地址提取教程”——现在他们处理商户详情页的时间，从每天3小时缩短到了30分钟，剩下的时间全用来摸鱼喝奶茶了（ 他没敢让老板知道）。
其实 下来，用JS提取UEditor图片地址的核心逻辑就3个：拿内容→找img→提src。难的不是代码本身，是你得先搞懂UEditor的内容结构，再针对实际项目里的“特殊情况”做处理——比如相对路径、base64这些。我帮朋友做的时候，一开始也踩过“用错getPlainTxt”“没处理相对路径”的坑，但调整之后，这套方法稳定运行了大半年，没出过错。
如果你按这些步骤试了，不管是成功导出了图片地址，还是遇到了奇怪的问题（比如提取不到某些img标签），欢迎回来留言告诉我——我帮你参谋参谋，毕竟踩过的坑多了，总能帮你少走点弯路～
怎么获取UEditor编辑器里的完整内容呀？
UEditor给了个现成的方法叫getContent()，只要你的编辑器容器ID是editor（比如里的id），用var editorContent = UE.getEditor(‘editor’).getContent();就能拿到完整的HTML内容啦。
注意别用getPlainTxt()哦，这个方法会把HTML标签全去掉，只能拿到纯文字，图片地址肯定找不到——我之前帮朋友调试时就踩过这个坑，结果输出的内容里全是“[图片]”，差点崩溃。
为什么提取img地址时要用getAttribute(‘src’)而不是直接img.src？
因为如果img的src是相对路径（比如./images/tea.jpg），直接用img.src会自动转成绝对路径（比如https://your-domain.com/images/tea.jpg）；而用getAttribute能拿到原始的src值。
比如你需要做路径替换（比如把/local/upload/改成CDN地址），用getAttribute拿到原始路径才方便——我朋友的平台迁移CDN时，就是靠这个方法快速替换了所有图片路径。
遇到base64格式的图片地址，怎么转成能上传的文件？
可以用base64转Blob对象的函数，比如先写一个base64ToBlob函数：把base64字符串 split 成mime类型和数据部分，再用atob解码数据，最后用Uint8Array和Blob构造函数生成Blob对象。
我帮朋友处理base64图片时，就用了这个函数，转成Blob后直接通过接口上传到CDN，再也不用让运营同学重新上传图片了——你可以直接复制这个函数用，亲测有效。
怎么给UEditor加个“导出图片地址”的按钮呀？
很简单，先加个按钮标签，再写个exportImgUrls函数：里面调用getContent()拿到内容，解析HTML找img标签，提取src，最后把结果显示在页面上或者下载成TXT。
我朋友的后台就是这么改的，现在运营同学点一下按钮就能导出所有图片地址，再也不用手动复制了——整个过程不到5分钟就能搞定，比喝奶茶还快。
UEditor里的图片是相对路径，怎么转成能直接访问的绝对路径？
用location.origin加上相对路径就行啦，比如你的相对路径是/upload/202405/tea.jpg，location.origin是https://your-domain.com，拼起来就是https://your-domain.com/upload/202405/tea.jpg。
我朋友的平台里商户上传的图片一开始都是相对路径，加了这行代码后，直接就能生成可访问的绝对路径，前端显示再也不报错了——这个方法超实用，你一定要试试。
