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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
详解Vue单元测试case写法
May 24 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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(7) php 字符串相关应用
2010/03/05 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
numpy自动生成数组详解
2017/12/15 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python中的变量如何开辟内存
2018/06/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
英语专业推荐信
2013/11/16 职场文书
教师推荐信范文
2013/11/24 职场文书
自主招生自荐信范文
2013/12/04 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
小学后勤管理制度
2014/01/14 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
公司聘任书模板
2014/03/29 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
武当山导游词
2015/02/03 职场文书
导游词之日月潭
2019/11/05 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL