js获取html页面代码中图片地址的实现代码
在HTML中的图片地址时,JavaScript可以发挥巨大的作用。以下是一个简单且实用的指南,介绍如何使用JavaScript获取HTML代码中的图片地址。对于需要的朋友,这里提供两种常见的方法供参考。
方法一:使用正则表达式
在JavaScript中,我们可以通过编写一个正则表达式函数来获取HTML字符串中的所有图片地址。这个函数会搜索HTML字符串中的``标签,并提取出`src`属性中的值。具体实现如下:
```javascript
function getimgsrc(htmlstr) {
var reg = /
var arr = []; // 用于存储图片地址的数组
var tem; // 用于存储正则匹配的结果
// 使用while循环和exec方法遍历匹配结果
while (tem = reg.exec(htmlstr)) {
arr.push(tem[2]); // 将匹配到的图片地址添加到数组中
}
return arr; // 返回包含所有图片地址的数组
}
```
方法二:使用jQuery
如果你正在使用jQuery库,那么获取图片地址会更为简单。可以通过选择器直接获取图片的`src`属性。例如:
```javascript
var imgSrc = $(this).find("img").attr("src"); // 获取当前元素下所有img标签的src属性(相对路径)
```
或者使用`.prop()`方法来获取完整的图片路径,包括协议头(如
```javascript
var fullImgSrc = $(this).find("img").prop("src"); // 获取完整的图片路径
```
请注意,js在获取图片的`src`时通常会得到完整的URL路径,包括协议头(如
```javascript
function showSelected(obj) {
var rootpath = ' // 域名或基础路径
var imgPath = obj.src; // 获取完整路径
var relativePath = imgPath.replace(rootpath, ''); // 替换掉基础路径得到相对路径
// 进行其他操作,如设置其他图片的src属性等
document.getElementById("cate_img_src").src = obj.src; // 设置其他元素的图片源为选中的图片完整路径
}
```
以上代码片段演示了如何在点击``标签时获取其完整路径,并提取出相对路径。这样可以根据需求进行进一步处理。这篇文章提供的这些方法希望能对需要的朋友有所帮助。如有更多疑问或需求,欢迎进一步。