url 上的正则表达式无法在没有 GET 参数的情况下拆分散列

Posted 2023-04-13

【中文标题】url 上的正则表达式无法在没有 GET 参数的情况下拆分散列

【英文标题】：regex on url cannot split out hash without GET param

【发布时间】：2015-12-04 17:04:08

【问题描述】：

我几乎已经实现了我的目标：一个检查有效 url 然后返回其部分的函数。一个有效的 url 很可能是无模式或无协议的（这用于前端侦听 textarea 和后端解析来自抓取的 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 参数时，它被找到但不仅仅是一个哈希..

【参考方案1】：

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

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

Test online and read the explanation pane on the right

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

但是，如果您尝试解析 URL，则 regex 不是解决此问题的工具。浏览器已经这样做了。检查以下代码：

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]);
  );