Utilisez js pour obtenir rapidement l'adresse de l'image dans la page html

Cette fois, je vais vous expliquer comment utiliser js pour obtenir rapidement l'adresse de l'image dans la page html. Quelles sont les précautions concernant l'utilisation de js pour obtenir rapidement l'adresse de l'image dans le html. page Ce qui suit est un cas pratique, jetons un coup d'oeil.

Cet article présente principalement le code d'implémentation de js pour obtenir l'adresse de l'image en code html. Les amis qui en ont besoin peuvent s'y référer

La première méthode : js est implémenté via des expressions régulières

/** 
 * 获取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; 
}

Deuxième méthode : implémentation de jquery

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

js obtient le src de l'image sous forme de chemin relatif

js obtient le nom de domaine lorsque obtenir le src ou en même temps le chemin ; si le chemin de l'image est mall/kmenus/001.png, utilisez obj.src ou obtenez http://localhost/mall/kmenus/001.png, mais obtenez généralement uniquement le chemin relatif . Faites ce disque.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le framework React BootStrap

Définir l'expiration des cookies, la mise à jour automatique et l'acquisition automatique

Comment réduire la taille des fichiers emballés par Webpack après compression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!