最近在尝试爬一个网站,网站图片使用了相对和绝对两种路径,导致某些图片下载失败。先百度一下牛人的解决方法,加以修改,现在基本能满足自己项目要求。
网上的方法:
<script>
function canonical_uri(src, base_path) {
var root_page = /^[^?#]*\//.exec(location.href)[0],
root_domain = /^\w+\:\/\/\/?[^\/]+/.exec(root_page)[0],
absolute_regex = /^\w+\:\/\//;
if (/^\/\/\/?/.test(src)) {
src = location.protocol + src;
} else if (!absolute_regex.test(src) && src.charAt(0) != "/") {
src = (base_path || "") + src;
}
return absolute_regex.test(src) ? src : ((src.charAt(0) == "/" ? root_domain : root_page) + src);
}
//test
document.write(canonical_uri('1.jpg')+'<br/>');
document.write(canonical_uri('/1.jpg')+'<br/>');
document.write(canonical_uri('./1.jpg')+'<br/>');
document.write(canonical_uri('../1.jpg')+'<br/>');
</script>
因为自己使用node, 没有location对象,且上面的代码不能解析../
相对路径,以下是自己优化后的版本:
增强版:
- 1.纯js,不需要jQuery;
- 2.纯字符串匹配,不依赖window.location,可用于node环境;
- 3.支持import和require;
- 4.支持npm模块加载: $ npm install abs-url;
- 5.兼容了几种常用的路径转化情况,demo中有示例
(函数排版比较随意,请自行美化)
<script>
/**
* absUrl.js 相对路径->绝对路径函数
* DH (http://denghao.me)
* 2017-11-08 09:48:52
*/
;
(function() {
function MyModule(src, basePath) {
var protocol = /^((ht|f)tps?)/.exec(basePath),
basePath = protocol ? basePath : 'http://' + basePath,
domain = /^\w+\:\/\/\/?[^\/]+/.exec(basePath)[0];
function deleteLastFolder(str) {
var i = str.lastIndexOf("\/");
if (i < 10) {
return str;
} else {
return str.substring(0, i);
}
}
function folderParse(path) {
var level = 0,
name = path.replace(/\.\.\//g, function(v) {
level++;
return '';
});
return {
level: level,
name: name
}
}
function basePathParse(path, basePath) {
var folder = folderParse(path);
basePath = basePath.replace(/(.*)\/+$/g, '$1');
for (var i = 0; i < folder.level; i++) {
basePath = deleteLastFolder(basePath)
}
return basePath + '/' + folder.name;
}
if (/^\/\/\/?/.test(src)) {
// eg. //cdn.com/1.jpg
src = (protocol ? (protocol[0] + ':') : 'http:') + src;
} else if (!/^\w+\:\/\//.test(src)) {
if (/^\/+/.test(src)) {
// eg. /1.jpg
src = domain + src;
} else if (/^\.\/+/.test(src)) {
// eg. ./1.jpg
src = src.replace(/^\.\/+/, '');
src = basePath + '/' + src;
} else if (/^\.\.\/+/.test(src)) {
// eg. ../1.jpg
src = basePathParse(src, basePath)
} else {
// eg. 1.jpg
src = basePath + '/' + src;
}
}
return src;
}
var absUrl = MyModule;
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = absUrl;
} else if (typeof define === 'function' && (define.amd || define.cmd)) {
define(function() {
return absUrl;
});
} else {
this.absUrl = absUrl;
}
}).call(this || (typeof window !== 'undefined' ? window : global));
// test
document.write(absUrl('1.jpg', 'http://denghao.me/a')+'<br/>');
document.write(absUrl('/1.jpg', 'http://denghao.me/a')+'<br/>');
document.write(absUrl('./1.jpg', 'http://denghao.me/a')+'<br/>');
document.write(absUrl('../1.jpg', 'http://denghao.me/a')+'<br/>');
//更变态的
document.write(absUrl('1.jpg', 'denghao.me')+'<br/>');
document.write(absUrl('//cdn.bootcss.com/1.jpg', 'http://denghao.me')+'<br/>');
document.write(absUrl('http://cdn.bootcss.com/1.jpg', 'http://denghao.me')+'<br/>');
document.write(absUrl('../../../../../../../1.jpg', 'http://denghao.me/a')+'<br/>');
</script>
使用方法:
上面的demo写得很清楚了,直接调用absUrl()方法。如果你项目使用npm,也可以直接npm install abs-url
安装调用。
源码已放在gitHub: https://github.com/denghao123/abs-url
ps:node中的url模块也提供类似方法, 链接在此[[url module]][3]。
(本篇完。有疑问欢迎留言探讨)
热门文章
- 微信小程序“拍照识图”上线(62,980)
- YouTube评论翻译插件《油管评论翻译机》上线了(57,022)
- 基金助手--chrome浏览器插件(43,582)
- 拍照识别彩票结果在线工具(31,301)
- vue+tabs动态组件方案漫谈(25,957)
- 《油管评论翻译机》使用说明书(23,681)
- 网页打印插件Print.js(23,441)
- 自用YouTube抓取评论+翻译工具(22,648)
- px转rem/vw方法小结(17,416)
- YouTube评论导出免费在线工具(16,637)