js获取html页面代码中图片地址的实现代码


Posted in Javascript onMarch 05, 2018

第一种方法:js通过正则实现

/** 
 * 获取html代码中图片地址 
 * @param htmlstr 
 * @returns {Array} 
 */ 
function getimgsrc(htmlstr) { 
  var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim; 
  var arr = []; 
  while (tem = reg.exec(htmlstr)) { 
    arr.push(tem[2]); 
  } 
  return arr; 
}

第二种方法:jquery实现

var img = $(this).find("img").attr("src");//这个是获得相对路径 prospertu
        //alert($(this).find("img").prop("src"));这个是获得完整路径 包括http://

js在获取图片的src是相对路径

js在获取src时或同时获取到域名路径;如图片路径是mall/kmenus/001.png,用obj.src或获取到http://localhost/mall/kmenus/001.png,但是通常只获取相对路径就可以了。做此记录。

<img src="mall/kmenus/001.png" onclick="showSelected(this)">

function showSelected(obj)
{
 var rootpath='http://localhost/';
 res=obj.src.replace(rootpath,'');
 //分离路径和图片
 document.getElementById("cate_img_src").src=obj.src;
}

这篇文章就介绍到这,需要的朋友可以参考一下。

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
Node学习记录之cluster模块
May 31 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 #Javascript
node.js通过axios实现网络请求的方法
Mar 05 #Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 #Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 #Javascript
解决vue处理axios post请求传参的问题
Mar 05 #Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 #Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
理解javascript回调函数
2014/12/28 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python单链表简单实现代码
2016/04/27 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Django用户认证系统 User对象解析
2019/08/02 Python
postman传递当前时间戳实例详解
2019/09/14 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python3判断IP地址的方法
2021/03/04 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
Delphi笔试题
2016/11/14 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
自我鉴定书
2014/03/24 职场文书
爱国口号
2014/06/19 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers