js 如何提取富文本里的图片路径
在JavaScript中,要从富文本内容中提取图片路径,你可以创建一个DOM元素来作为解析富文本内容的容器,然后将富文本内容作为文本节点插入这个容器中。接着,你可以使用querySelectorAll
方法和CSS选择器来选择所有的img
元素,并获取它们的src
属性。
以下是一个简单的示例代码
function extractImagePaths(richTextContent) { // 创建一个临时的div容器 const tempDiv = document.createElement('div'); // 将富文本内容设置为div的内部文本 tempDiv.innerHTML = richTextContent; // 查找所有的img元素 const images = tempDiv.querySelectorAll('img'); // 提取并返回所有图片的路径 return Array.from(images).map(img => img.src); } // 示例富文本内容 const richText = ` <p>这里是文字内容...</p> <img src="path/to/image1.jpg" alt="图片1"> <img src="path/to/image2.jpg" alt="图片2"> `; // 使用函数提取图片路径 const imagePaths = extractImagePaths(richText); console.log(imagePaths); // ["path/to/image1.jpg", "path/to/image2.jpg"]
这段代码定义了一个extractImagePaths
函数,它接受富文本内容作为参数,返回一个包含所有图片路径的数组。在这个例子中,richText
变量包含了富文本内容,extractImagePaths
函数处理这个内容并返回一个包含图片路径的数组。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步