首页 > 其他分享 >js 如何提取富文本里的图片路径

js 如何提取富文本里的图片路径

时间:2024-03-22 11:15:40浏览次数:24  
标签:const img 路径 js 内容 文本 extractImagePaths

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

标签:const,img,路径,js,内容,文本,extractImagePaths
From: https://www.cnblogs.com/tanweiwei/p/18088980

相关文章

  • 代码随想录算法训练营第十七天| 110. 平衡二叉树 257. 二叉树的所有路径 404. 左叶
    110.平衡二叉树https://leetcode.cn/problems/balanced-binary-tree/description/publicbooleanisBalanced(TreeNoderoot){intbalance=balance(root);returnbalance==-1?false:true;}publicintbalance(TreeNodenode){i......
  • python把html渲染成带格式的文本
    在Python中,可以使用html2text库将HTML内容转换成纯文本,保留一定的格式。首先需要安装这个库:pipinstallhtml2text然后使用它的html2text函数将HTML转换为Markdown格式的文本:importhtml2text#示例HTML内容html_content="""<h1>标题</h1><p>这是一个段落。</p><ul>......
  • 【附源码】Node.js毕业设计高校后勤管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今信息化时代,高校后勤管理作为学校日常运营的重要组成部分,承担着保障校园环境、维护学生生活和教学秩序的重要职责。随着教育体系的不断壮大,传统的人工......
  • 【附源码】Node.js毕业设计高校后勤保修系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今信息化时代,高效、便捷的管理方式已经成为了各个领域追求的目标。对于高校来说,后勤保修工作是保障校园正常运行的重要环节。传统的高校后勤保修工作主......
  • JSON格式数据
    JSON简介JSON是一种轻量级的数据交换格式,全称为JavaScriptObjectNotation。它采用完全独立于编程语言的文本格式来表示数据,具有简洁、易读、易解析等特点。简洁和清晰的层次结构使得JSON成为理想的数据交换语言,易于一般人阅读和编写。 JSON的作用可在多种语言......
  • Jackson进行JSON序列化/反序列化添加Java 8的日期和时间库支持
     添加依赖包<!--Jackson进行JSON序列化/反序列化添加Java8的日期和时间库支持--> <dependency> <groupId>com.fasterxml.jackson.datatype</groupId> <artifactId>jackson-datatype-jsr310</artifactId> <version>2.13.0</version> ......
  • 前端基础之原生js事件绑定案例
    原生js事件绑定开关灯案例<script><divid="d1"class="c1bg_greenbg_red"></div><buttonid="d2">变色</button><script>letbtnEle=document.getElementById('d2')letdivEle=docum......
  • JSP语法 《Java Web开发从入门到实战》第三章节
    目录一、JSP页面的基本构成1、普通的HTML标记2、JSP注释(增强JSP文件的可读性,便于Web项目的更新和维护)3、Java脚本元素:声明、Java程序片、Java表达式4、JSP标记:指令标记、动作标记、自定义标记等二、<%%>和<%!%>的不同之处1、翻译不同2、定义不同3、声明不同......
  • 移动端 页面适配 原生js及lib-flexible 插件
    1.js原生;(function(win,doc){change()functionchange(){varremSize=window.innerWidth/7.5||50/*设计稿是以width=750px为基准的*/document.querySelector('html').style.fontSize=(remSize>100?100:remSize)+'px'}......
  • JSP内置对象笔记整理
    JSP内置对象《JavaWeb开发从入门到实战》第四章内置对象:在JSP页面中不需要声明和实例化,可以直接在Java程序片和Java表达式部分使用的对象。分类·:与Input/Output有关的内置对象与Context有关的内置对象与Servlet有关的对象与Error有关的内置对象与Input/Output有关的......