Home > Web Front-end > JS Tutorial > js implementation code to obtain the image address in the html page code

js implementation code to obtain the image address in the html page code

亚连
Release: 2018-06-01 11:23:14
Original
1335 people have browsed it

This article mainly introduces the implementation code for js to obtain the image address in the html code. Friends who need it can refer to it

The first method: js through regular implementation

/** 
 * 获取html代码中图片地址 
 * @param htmlstr 
 * @returns {Array} 
 */ 
function getimgsrc(htmlstr) { 
  var reg = /<img.+?src=(&#39;|")?([^&#39;"]+)(&#39;|")?(?:\s+|>)/gim; 
  var arr = []; 
  while (tem = reg.exec(htmlstr)) { 
    arr.push(tem[2]); 
  } 
  return arr; 
}
Copy after login

Second Method: jquery implementation

 var img = $(this).find("img").attr("src");//这个是获得相对路径 prospertu
        //alert($(this).find("img").prop("src"));这个是获得完整路径 包括http://
Copy after login

js obtains the src of the image as a relative path

js obtains the domain name path when obtaining the src or at the same time; if the image path is mall /kmenus/001.png, use obj.src or get http://localhost/mall/kmenus/001.png, but usually only get the relative path. Make this record.

<img src="mall/kmenus/001.png" onclick="showSelected(this)">

function showSelected(obj)
{
 var rootpath=&#39;http://localhost/&#39;;
 res=obj.src.replace(rootpath,&#39;&#39;);
 //分离路径和图片
 document.getElementById("cate_img_src").src=obj.src;
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use vue to write a sample code for a carousel chart that imitates a simple book

Solve the vue-cli creation project Loader problem

setTimeout time is set to 0 Detailed analysis

The above is the detailed content of js implementation code to obtain the image address in the html page code. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template