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 @   维维WW  阅读(503)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示