JavaScript获取HTML图片地址的三种方式
作者:像素漫游时间:2026-10-22 13:01:53浏览:569
本文介绍JavaScript获取HTML页面图片地址的两种主要方法:使用正则表达式解析HTML字符串,以及利用jQuery的find与attr方法。重点讨论了获取图片src时相对路径与完整URL的区别,并通过示例演示如何剥离域名前缀以获取纯相对路径。
正则表达式提取图片地址
第一种方案:利用JavaScript正则表达式进行提取
/**
* 获取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获取图片路径
第二种方案:基于jQuery库实现
var img = $(this).find("img").attr("src");//这个是获得相对路径 prospertu
//alert($(this).find("img").prop("src"));这个是获得完整路径 包括http://
处理相对路径与完整URL
JavaScript在获取图片src属性时遇到相对路径的情况
JavaScript在获取src属性时可能同时包含域名信息;例如图片路径为mall/kmenus/001.png,通过obj.src或.prop("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;
}
本文介绍至此,有需要的朋友可以参考学习。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
