javascript - url 上的正则表达式无法在没有 GET 参数的情况下拆分哈希值

Question

我几乎已经实现了我的目标:一个检查有效 url 然后返回其部分的函数。有效的 url 很可能是无模式或无协议(protocol)的(这用于前端监听文本区域和后端从抓取的 url 及其标签解析结果)。

这是工作示例: http://jsfiddle.net/6v1u5w1f/2/

var url = {
check:function( url ){
	var urlPattern = /((http|ftp|https):)?\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/gi;
	var patt = new RegExp( urlPattern );
	return patt.exec( url );
},
getParts: function( url ){
	url = this.check( url );
    if( !url ) return false;
 			var singleUrlPattern =/^(?:(.*?):)?(\/\/)?(?:[^\/\.]+\.)*?([^\/\.]+)\.?([^\/]*)(?:([^?]*)?(?:\?([^#]*))?)?(.*)?/;
   			return singleUrlPattern.exec( url[0] );
   	}
};


var urls = {
 schema_less:	'//cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
 http: 			'http://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
 https: 		'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
 get: 			'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg?this=that',
 hash: 			'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg#this=that',
 getAndHash:		'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg?this=that#dogs=cats',
 none: 			'cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
 sentence:		'bob https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg dog',
 barUrl:			'hi there this is my url: mazonaws.com/img/636/nl_nbp.jpg' };

//loop each url and run through the getParts function and print what it returns
for( var keya in urls ){
  console.log( keya+':' );
  console.log( url.getParts( urls[keya] ) );
  console.log( '               ' );    
}

在示例中，它将循环遍历一系列 poss url 模式并控制台记录函数的结果。

问题在于仅在 url 中存在哈希值，我无法让它从 url 路径中分离出哈希值。当有 GET 参数时，它会被查找，但不仅仅是一个哈希值..

Answer 1

考虑到您已经尝试过的操作以及问题的范围，您可以使用以下表达式来匹配网址:

(?:(https?|ftp):\/\/)?\/*([^:\/\s]+)((\/\w+)*\/)([-.\w]+[^#?\s]*)?(?:\?([^#\s]*))?(#[-\w@?^=%&;\/~+#]+)?

Test online and read the explanation pane on the right

免责声明:此正则表达式确实存在一些误报，会匹配任何带有“/”的内容，因为 URI 与文本中的任何单词并没有太大不同。此外，它并不涵盖所有有效的 URI。它只是作为OP所述的一种方法。

但是，如果您尝试解析 URL，则正则表达式不是解决此问题的工具。浏览器已经做到了这一点。检查以下代码:

var urls = {
  schema_less:	'//cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
  http: 		'http://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
  https: 		'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
  get: 			'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg?this=that',
  hash: 		'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg#this=that',
  getAndHash:	'https://cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg?this=that#dogs=cats',
  none: 		'cartassets.s3.amazonaws.com/img/636/nl_nbp.jpg',
};

var parseURL = document.createElement('a');

for( var keya in urls ){
  parseURL.href = urls[keya];
  ['href','protocol','host','hostname','port','pathname','search','hash'].forEach( function(part) {
    document.write("<br />", keya , ": ", part, ": ", parseURL[part]);
  });
}