Example of converting relative path to absolute path using javascript_Basic knowledge

What is introduced here are essentially two methods, by creating DOM or calculating through JavaScript:

1) Through the newly created Image, after testing, an Aborted request will be sent, and IE6 does not support it. Changing the new Image to document.createElement('IMG') is the same; the test may not like this solution;

Copy code The code is as follows:

function getAbsoluteUrl(url){
var img = new Image();
img.src = url; //Set the relative path to Image, and a request will be sent
url = img.src; //The relative path has become an absolute path
img.src = null; // Cancel request
return url;
}
getAbsoluteUrl("showroom/list");

2) Create Anchor (link). This method will not issue any request (the request will be generated when joining the DOM), but IE6 does not support it either

Copy code The code is as follows:

/*jslint regexp: true, white: true, maxerr : 50, indent: 2 */

function parseURI(url) {
var m = String(url).replace(/^s |s $/g, '').match(/^ ([^:/?#] :)?(//(?:[^:@]*(?::[^:@]*)?@)?(([^:/?#]*)( ?::(d*))?))?([^?#]*)(?[^#]*)?(#[sS]*)?/);
// authority = '// ' user ':' pass '@' hostname ':' port
return (m ? {
href : m[0] || '',
protocol : m[1] || '',
authority: m[2] || '',
host : m[3] || '',
hostname : m[4] || '',
port : m[5 ] || '',
pathname : m[6] || '',
search : m[7] || '',
hash : m[8] || ''
} : null);
}

function absolutizeURI(base, href) {// RFC 3986

function removeDotSegments(input) {
var output = [];
input.replace(/^(..?(/|$)) /, '')
.replace(//(.(/|$)) /g, '/')
.replace (//..$/, '/../')
.replace(//?[^/]*/g, function (p) {
if (p === '/.. ') {
           output.pop(); replace(/^//, input.charAt(0) === '/' ? '/' : '');
}

href = parseURI(href || '');
base = parseURI(base || '');

return !href || !base ? null : (href.protocol || base.protocol)
(href.protocol || href. authority ? href.authority : base.authority)
removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ( (base.authority && !base.pathname ? '/' : '') base.pathname.slice(0, base.pathname.lastIndexOf('/') 1) href.pathname) : base.pathname))
(href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search))
                 href.hash;
}



Because our product is a mobile web page, it no longer supports IE6, so we ended up using the second solution;

It can be seen that when accessing all Images and Anchors using the original method, absolute paths are returned. If you want to return the original relative path, you can use the DOM query method, such as jQuery.attr() Method:

Copy code

The code is as follows: //Return the absolute path, the jQuery object is essentially It is an "array-like" structure (similar to arguments), so you can use [0] to access the original object, and then take "href";console.log($anchor[0]["href"]);//Return to the original path

console.log($anchor.attr("href"));