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

posted @ 2024-03-22 10:52  维维WW  阅读(268)  评论(0编辑  收藏  举报