• 技术文章 >web前端 >js教程

    js如何直接获取网页中图片地址

    php中世界最好的语言php中世界最好的语言2018-03-28 13:32:21原创3469
    这次给大家带来js如何直接获取网页中图片地址,js直接获取网页中图片地址的注意事项有哪些,下面就是实战案例,一起来看一下。

    第一种方法:js通过正则实现

    /** 
     * 获取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实现

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

    js在获取图片的src是相对路径

    js在获取src时或同时获取到域名路径;如图片路径是mall/kmenus/001.png,用obj.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;
    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    怎样用Koa2框架的CORS完成跨域ajax请求

    在Vue2.0中http请求以及loading的展示

    以上就是js如何直接获取网页中图片地址的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 图片 网页
    上一篇:JS的数据类型使用详解 下一篇:vue axios页面切换时怎么中断请求
    大前端线上培训班

    相关文章推荐

    • innerhtml是jquery方法么• javascript怎么设置标签的背景颜色• jquery select 不可编辑怎么办• javascript 怎么将时间转毫秒• 浅谈怎么利用node提升工作效率

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网