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 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
jquery实现穿梭框功能
Jan 19 jQuery
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与paypal整合方法
2010/11/28 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
任意位置显示html菜单
2007/02/01 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
js实现拖拽功能
2017/03/01 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
节约电力资源的建议书
2014/03/12 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
人事局接收函
2015/01/30 职场文书
技术支持岗位职责
2015/02/13 职场文书
2015年财政所工作总结
2015/04/25 职场文书
干部考核工作总结
2015/08/12 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python