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
函数处理这个内容并返回一个包含图片路径的数组。