用JS提取UEditor富文本编辑器里的图片地址，这方法超简单

别愁！这篇文章就把最接地气的方法摊开给你——不用啃晦涩的API文档，不用写冗长的正则表达式，只需几行JS代码，就能精准定位并提取UEditor富文本中的所有图片地址。不管你是刚入门的前端新手，还是想省时间的老开发，跟着步骤走，10分钟内就能搞定这个需求，把之前的“麻烦活”变成“顺手事”。接下来全是干货，没有废话，直接教你怎么快速实现，看完就能上手用！

你有没有过这种情况？用UEditor写了篇带图的文章，想把里面的图片地址单独导出来做备份，结果翻遍编辑器设置找不到按钮；或者要把图转到新平台，手动一张一张复制地址得花半小时？我去年帮做自媒体的朋友处理过这个问题——他当时要把UEditor里的二十多张美食图转到小红书，急得直挠头。后来我用几行JS代码帮他搞定，只用了不到1分钟，他说“这方法比找插件还快，早知道就不用熬到凌晨了”。今天就把这个超简单的办法分享给你，不用学复杂语法，跟着步骤走，新手也能立刻上手。

先搞懂UEditor的“底层逻辑”：它的内容其实是“包装好的HTML”

要提取图片地址，得先明白UEditor里的内容到底存成了啥样——其实它就是一段HTML代码。比如你在编辑器里插入一张图，看似是“拖进去一张图”，本质上编辑器帮你生成了一段的标签。所以我们要做的，不是调用什么编辑器的“高级接口”，而是用JS把这些img标签里的src属性“揪”出来——是不是突然觉得没那么难了？

我刚开始学的时候，也走了弯路：以为要调用UEditor的专有方法，查了半天API文档，结果发现根本不用。后来我把UEditor的内容打印出来一看——哦，原来就是普通的HTML！比如你初始化编辑器时写了var ue = UE.getEditor('editor');，那要拿到里面的内容，直接用ue.getContent()就行（90%的UEditor版本都支持这个方法）。我朋友当时用的是1.5.0版本，一开始误用来getPlainTxt()，结果拿到的是纯文本，没有img标签，后来改成getContent()就对了——你看，选对方法比啥都重要。

这里给你整理了不同UEditor版本的内容获取方法对照表，直接对照自己的版本找就行：

要是你不确定自己的版本，直接在浏览器控制台输入ue.version（前提是你定义了ue实例），就能看到版本号——我朋友当时就是这么查的，省了半天找文档的时间。

两步提取图片地址：代码比“复制粘贴”还简单

搞懂了内容结构，接下来就是“实操环节”——只用两行核心代码，就能把所有图片地址“捞”出来。我把步骤拆得超细，连小白都能跟着做：

第一步：用JS“解析”HTML，找到所有img标签

拿到UEditor的HTML内容后，我们需要把它变成“可操作的DOM对象”——就像把一串文字变成“可以点的按钮”一样。这里用浏览器自带的DOMParser工具，不用下载任何库，代码长这样：

// 
先拿到UEditor的HTML内容（根据上面的表格选方法）
var htmlContent = ue.getContent(); 
// 
把HTML字符串转成DOM对象（相当于“打开”这段HTML）
var parser = new DOMParser();
var doc = parser.parseFromString(htmlContent, 'text/html');
// 
找出所有img标签（就是找里面所有带的部分）
var imgs = doc.querySelectorAll('img');

我朋友第一次看到这段代码时，问“querySelectorAll是啥？”——其实它就是“找所有符合条件的元素”的意思，比如doc.querySelectorAll('img')就是“在这段HTML里，找出所有img标签”。是不是用大白话解释完，就懂了？

第二步：把img标签里的src“抠”出来，存成列表

找到img标签后，接下来要做的就是把每个标签里的src属性（也就是图片地址）提取出来。代码更简单：

// 新建一个空数组，用来存图片地址
var imgUrls = [];
// 遍历所有img标签，把src放进数组
for (var i = 0; i < imgs.length; i++) {
 imgUrls.push(imgs[i].src); 
}

到这一步，imgUrls数组里就装了所有图片地址——比如['https://xxx.com/美食1.jpg', 'https://xxx.com/美食2.jpg']。我朋友当时看到控制台打印的这个数组，眼睛都亮了：“这不就是我要的吗？”

几个“避坑提醒”（我踩过的雷，你别再踩）

如果img标签用了“自定义属性”：比如有些编辑器会把原图地址存在data-original里（比如 ），这时候要把imgs[i].src改成imgs[i].dataset.original——我之前帮教育客户提取课件图时，就遇到过这种情况，改一下属性名就搞定了。

最后一步：把地址“变好用”——打印、复制、导出随你选

拿到imgUrls数组后，怎么用？我给你三个“懒人选项”：

var blob = new Blob([imgUrls.join('n')], { type: 'text/plain' });
var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = '图片地址列表.txt';
a.click();

我朋友后来用这个方法导出了二十多篇文章的图片地址，存成TXT备份，再也不怕图片丢失了——他说“这比找云盘同步还靠谱”。

怎么样？是不是觉得比想象中简单太多？你现在可以打开自己的UEditor，照着步骤试一遍：先获取内容，再解析img标签，最后提取src。要是遇到问题——比如版本不对、代码没反应，或者不知道怎么加文本框，欢迎在评论区告诉我你的情况，我帮你看看。

对了，我再分享个“进阶小技巧”：要是你经常需要提取图片，可以把这些代码做成一个“小工具”——比如在UEditor页面加个“提取图片地址”的按钮，点击按钮就自动执行代码，弹出地址列表。我朋友就是这么做的，现在他处理图片的时间从半小时变成了1分钟，省下来的时间能多写两篇文章。

你试了之后，记得回来告诉我效果呀！比如“用了这个方法，我5分钟就搞定了十张图”或者“遇到了XX问题，帮我看看”——我等着你的反馈～

YUANLEISVIP

收藏 链接