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;
}

本文介绍至此,有需要的朋友可以参考学习。

作者最新文章