首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JS从多个img src标记中删除文件夹

,可以通过以下步骤实现:

  1. 遍历所有的img标签,获取它们的src属性值。
  2. 判断src属性值是否包含文件夹路径,可以使用正则表达式或字符串方法来判断。
  3. 如果src属性值包含文件夹路径,则使用字符串方法或正则表达式将文件夹路径删除,得到文件名。
  4. 根据文件名构建新的src属性值,替换原来的src属性值。
  5. 重复以上步骤,直到遍历完所有的img标签。

以下是一个示例代码:

代码语言:txt
复制
// 获取所有的img标签
var imgTags = document.getElementsByTagName('img');

// 遍历img标签
for (var i = 0; i < imgTags.length; i++) {
  var src = imgTags[i].getAttribute('src');
  
  // 判断src属性值是否包含文件夹路径
  if (src.includes('/')) {
    // 使用字符串方法将文件夹路径删除,得到文件名
    var fileName = src.substring(src.lastIndexOf('/') + 1);
    
    // 构建新的src属性值,替换原来的src属性值
    var newSrc = '新的文件夹路径/' + fileName;
    imgTags[i].setAttribute('src', newSrc);
  }
}

这段代码会遍历页面中的所有img标签,如果src属性值包含文件夹路径,则将文件夹路径删除,并构建新的src属性值替换原来的src属性值。请根据实际情况修改代码中的文件夹路径。

这个问题涉及到前端开发和JavaScript编程,可以使用腾讯云的云开发产品来进行部署和测试。腾讯云云开发是一款无服务器云开发平台,提供了前端开发、后端开发、数据库、存储等一体化解决方案。您可以通过腾讯云云开发来进行前端开发和部署,具体产品介绍和使用方法可以参考腾讯云云开发的官方文档:腾讯云云开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PowerBI从Onedrive文件夹中获取多个文件,依然不使用网关

首先,数据文件放在onedrive的一个文件夹中: ? 我们按照常规思路,获取数据-从文件夹: ? 导航到所要选择的文件夹,加载: ? ?...整个过程的PQ底层逻辑很清楚,使用一个示例文件作为函数,然后用这个函数遍历文件夹中的所有文件,最终将结果合并到一张表中: ? 发布到云端,还是遇到相同的问题,需要安装并打开网关: ?...一共有三个,我们分别看一下微软文档中简介和从以上路径获取的信息: 1.SharePoint.Files ? SharePoint.Files获取的是文件,根目录下和子文件夹下的所有文件: ?...以下解释一下几个细节问题: 1.为什么一定要使用根目录呢?原因是我在测试过程中,PQ出现的一个错误给的提示: ? 所以,要直接获取文件就填写实体的url,要获取文件夹就使用根目录url。...正如在这篇文章中说的: 从Power BI“最近使用的源”到盗梦空间的“植梦” 如果将所有的excel文件都放在onedrive中(强烈建议这么做),那么之后我们再想往模型中添加excel文件,只需要点击最近使用的源

6.9K41

如何创建修改远程仓库 + 如何删除远程仓库 + 如何删除远程仓库中的某个文件或文件夹 + 如何使用git将本地仓库连接到多个远程仓库

六、删除Github中已有的仓库中的某个文件或文件夹(即删除远程仓库中的某个文件或文件夹) 我们知道,在Github上我们只能删除仓库,并不能删除文件或者文件夹,所以只能用命令来解决。...即我们通过删除本地仓库的某个文件或文件夹后,再将本地仓库与远程仓库同步,即可删除远程仓库中的某个文件或文件夹。...6.1、本地仓库和远程仓库同时删除文件或文件夹 1、我们先在本地仓库中删除掉文件a.txt ? 2、然后执行以下命令,即可删除远程仓库中的文件了 ? 删除远程仓库中的文件夹同理。不在演示。...6.2、只删除远程仓库的文件或文件夹,不删除本地仓库的文件或文件夹 假如我们想要在远程仓库中将文件夹test01删除掉,但在本地仓库中并不想把它删除: ? 在命令窗口输入以下命令: ?...注意:   git pull (从远程仓库中pull下来的项目放到的是本地的缓存里。)   git clone 远程仓库地址 (从远程仓库中clone下来的项目放到的是本地的磁盘里。)

7.5K21
  • HTML 基础语法

    markup tag) HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。...4.采取键值对 key="value" 的格式 图像标签 作用:用于显示图像 语法格式:img src="dir/img.img" /> -src:用于指定图像文件的路径和文件名 -alt:用于图像不能显示时的替换文本...1.图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="img.jpg" /> 2.图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如...img src="img/img1/img.jpg" /> 3.图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如img src="../.....-name:用于指定表单的名称,以区分同一个页面中的多个表单。 写到最后 个人博客:www.levimaster.cn

    1.8K41

    HTML

    markup tag) HTML 作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来。...4.采取键值对 key=”value” 的格式 图像标签 作用:用于显示图像 语法格式:img src="dir/img.img" /> -src:用于指定图像文件的路径和文件名 -alt:用于图像不能显示时的替换文本...1.图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="img.jpg" /> 2.图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如...img src="img/img1/img.jpg" /> 3.图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如img src="../.....-name:用于指定表单的名称,以区分同一个页面中的多个表单。

    1.4K21

    Springboot用官方建议访问Html页面并接传值

    image.png 这里static主要存放css js等静态资源文件 不做过多的讲述,主要来讲讲templates中html的Thymeleaf的属性,这里也是困扰我一段时间的地方,当然Springboot...图片类地址引入       img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> th:inline...定义js脚本可以使用变量 th:action 表单提交的地址     ...2.body:不包含标记删除,但删除其所有的孩子。                     3.tag:包含标记的删除,但不删除它的孩子。                     ...th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。

    7.1K40

    EJS模板在express中的使用攻略及应用实例(建议收藏)

    ---- 三、以文件形式使用模板 在上个例子中,我们将模板放到变量template中,数据量少的话还可以,倘若数据量比较大的话,将是一件十分恐怖的事情。...比如,我们要将模板文件放置到html文件夹内: 1、创建html文件夹 2、将上个示例中的one.ejs移入html文件夹内 3、上示例中的demo.js添加如下代码: // 设置模板文件夹为htmlapp.set.../",默认使用的文件为views文件夹下index.ejs文件: res.render("./",{}); 更改默认文件夹为html文件夹后,默认使用的文件为html文件夹下的index.ejs文件:...八、自定义闭合标记 ejs默认的闭合标记是 ,假如你感觉该标记使用起来不是很爽的话,我们也可以自定义ejs的闭合标记,例如修改为: ejs.delimiter="?"..._%> 将结束标签后面的空格符删除 十、include 通过 include 指令将相对于模板路径中的模板片段包含进来。

    4.7K21

    SpringBoot(四)之thymeleaf的使用

    这篇文章将更加全面详细的介绍thymeleaf的使用。thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎。...图片类地址引入 img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> th:inline 定义js脚本可以使用变量...2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。...th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。...如果需要Thymeleaf对URL进行渲染,那么务必使用th:href,th:src等属性,下面是一个例子 <!

    2.6K100

    详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

    :项目入口文件 ♞ main.js::项目的核心文件 详解 static 静态资源目录,如图片、字体等 详解 test 初始测试目录,可删除 详解 .xxxx 文件 这些是一些配置文件,包括语法配置,git...1.3 src assets:放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。...之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式; components:放置通用模块组件...index.html 文件里,形成单页面应用; main.js:入口 js 文件,影响全局,作用是引入全局使用的库、公共的样式和方法、设置路由等 ?...这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来设置的。

    4K20

    不得不佩服,美观小巧的网页内容编辑器——ContentTools

    通过属性对话框中的最后一个选项卡,可以查看所选元素的内部HTML代码并直接对其进行更新。 使用 第一步是下载JS,CSS和其他关联的项目文件: 下载仓库并打开/ build文件夹,包括预构建的源文件。...但是,/ images文件夹和icons.woff字体需要复制到与content-tools.min.css相同的文件夹中,文件结构应类似于: ?...src="assets/content-tools.min.js"> src="assets/editor.js"> ...Woods data-name属性用于在保存时标识区域(默认情况下使用id属性),标记可编辑HTML时,常见的误解是将单个元素标记为可编辑,例如: 从视口底部的检查器栏中选择标签时,这些标签就会出现。尽管可以将样式设置为适用于所有标签,但是仅显示适用于标签类型的样式。 ? 我们将添加可应用于段落标记的单一样式.author。

    2.8K10

    HTML标记语言学习笔记

    HTML用于组织网页内容,CSS用于网页的布局,JavaScript用于在网页中执行代码操作。 本人学习HTML、JavaScript是为了从电子地图JS端口获取数据,当然用途不仅限此。...(markup language) 3) 标记语言是一套标记标签 (markuptag) 4) HTML 使用标记标签来描述网页 -3rd- HTML 标签 ---- 01 概述 HTML...图像通过 img> 标签进行定义的 实例 img src="w3school.jpg" width="104" height="142" /> *图像的名称和尺寸是以属性的形式提供的。...路径 描述 img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹 img src="images/picture.jpg"> picture.jpg 位于当前文件夹的...images 文件夹中 img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中 img src="..

    1.9K31
    领券