href 属性值显示不出来_处理不合格的HREF值

href 属性值显示不出来

在构建用于查找未使用CSS规则的扩展程序时 ，我需要一种将所有href值限定为完整URI的方法 。 我之所以需要它，是因为我希望它支持IE条件注释中的样式表，但是对于Firefox来说，这些仅仅是注释-我必须使用正则表达式解析每个注释节点，以提取其中的内容，因此，我得到了href值back始终只是一个字符串，而不是属性或限定路径。

这不是我第一次需要此功能，但是在过去，我已经可以在可预见的情况下知道域名和路径。 但是在这种情况下，这是无法预料的-我需要一种适用于任何域名，任何路径和任何href格式的解决方案（请记住， href值可以是多种格式中的任何一种）：

• 相对： "test.css"
• 相对目录： "foo/test.css"
• 相对位置： "./test.css"
• "../../foo/test.css"相对目录结构： "../../foo/test.css"
• 相对于http根目录： "/test.css"
• 绝对： "http://www.sitepoint.com/test.css"
• 绝对带有端口： "http://www.sitepoint.com:80/test.css"
• 绝对不同的协议： "https://www.sitepoint.com/test.css"

HREF什么时候有资格？

当我们使用JavaScript检索href时，返回的值会有一些跨浏览器的怪癖。 最.href情况是，使用简写.href属性检索的值将作为合格的URI返回 ，而使用getAttribute('href')检索的值将（并且应根据规范）作为文字属性值返回。 因此，通过此链接：

<a id="testlink" href="/test.html">test page</a>

我们应该得到这些值：

document.getElementById('testlink').href == 'http://www.sitepoint.com/test.html';
document.getElementById('testlink').getAttribute('href') == '/test.html';

在Opera，Firefox和Safari中，这确实是我们得到的。 但是，在Internet Explorer（所有版本，包括IE7及更高版本）中，都不会发生这种情况-对于这两个示例，我们都获得了标准的URI而不是原始属性值：

document.getElementById('testlink').href == 'http://www.sitepoint.com/test.html';
document.getElementById('testlink').getAttribute('href') == 'http://www.sitepoint.com/test.html';

凯文·扬克（Kevin Yank）和卡梅隆·亚当斯（Cameron Adams）的最新著作《 简单JavaScript 》（ Simply JavaScript ）中记录了这种行为怪癖。 但它仍然变得更古怪。 尽管此行为适用于常规链接（ <a>元素）的href ，但如果对<link>样式表执行相同的操作，则IE 中将获得完全相反的行为 。 此HTML ：

<link rel="stylesheet" type="text/css" href="/test.css" />

产生以下结果：

document.getElementById('teststylesheet').href == '/test.css';
document.getElementById('teststylesheet').getAttribute('href') == '/test.css';

在这两种情况下，我们都获得原始属性值（而在其他浏览器中，我们获得的结果与锚点相同.href是完全限定的，而getAttribute产生文字值）。

无论如何…

除了行为上的怪癖，我不得不说IE带有链接的行为几乎总是我想要的。 从URI派生路径或文件名非常简单，但相反则要复杂得多。

所以我写了一个辅助函数来做到这一点。 它接受任何格式的href ，并根据当前文档位置返回合格的URI （或者，如果该值已经合格，则返回不变）：

//qualify an HREF to form a complete URI
function qualifyHREF(href)
{
	//get the current document location object
	var loc = document.location;

	//build a base URI from the protocol plus host (which includes port if applicable)
	var uri = loc.protocol + '//' + loc.host;

	//if the input path is relative-from-here
	//just delete the ./ token to make it relative
	if(/^(./)([^/]?)/.test(href))
	{
		href = href.replace(/^(./)([^/]?)/, '$2');
	}

	//if the input href is already qualified, copy it unchanged
	if(/^([a-z]+):///.test(href))
	{
		uri = href;
	}

	//or if the input href begins with a leading slash, then it's base relative
	//so just add the input href to the base URI
	else if(href.substr(0, 1) == '/')
	{
		uri += href;
	}

	//or if it's an up-reference we need to compute the path
	else if(/^((../)+)([^/].*$)/.test(href))
	{
		//get the last part of the path, minus up-references
		var lastpath = href.match(/^((../)+)([^/].*$)/);
		lastpath = lastpath[lastpath.length - 1];

		//count the number of up-references
		var references = href.split('../').length - 1;

		//get the path parts and delete the last one (this page or directory)
		var parts = loc.pathname.split('/');
		parts = parts.splice(0, parts.length - 1);

		//for each of the up-references, delete the last part of the path
		for(var i=0; i<references; i++)
		{
			parts = parts.splice(0, parts.length - 1);
		}

		//now rebuild the path
		var path = '';
		for(i=0; i<parts.length; i++)
		{
			if(parts[i] != '')
			{
				path += '/' + parts[i];
			}
		}
		path += '/';

		//and add the last part of the path
		path += lastpath;

		//then add the path and input href to the base URI
		uri += path;
	}

	//otherwise it's a relative path,
	else
	{
		//calculate the path to this directory
		path = '';
		parts = loc.pathname.split('/');
		parts = parts.splice(0, parts.length - 1);
		for(var i=0; i<parts.length; i++)
		{
			if(parts[i] != '')
			{
				path += '/' + parts[i];
			}
		}
		path += '/';

		//then add the path and input href to the base URI
		uri += path + href;
	}

	//return the final uri
	return uri;
}

该工具包还有一个！

翻译自: https://www.sitepoint.com/dealing-with-unqualified-href-values/

href 属性值显示不出来