Question

我一直很难使用正则表达式，但我认为现在我有合法的需求，而且我不确定是否可以使用它们完成它。

我想要一个正则表达式，在执行时，返回给定URL的所有组件。 不是用于验证格式：前置条件是传递正确的URL（通常是location.href）。

所需的组件是：

方案
域
port（可选）
路径
查询字符串

加成：

分别查询字符串参数
片段
用户/密码

示例：

/regex/.exec('http://www.stackoverflow.com/questions/1/regex-for-getting-url-components-in-javascript') --> ["http://stackoverflow.com/questions/30868359/regex-for-getting-url-components-in-javascript", "http", "www.stackoverflow.com", undefined, "questions/30868359/regex-for-getting-url-components-in-javascript"]

/regex/.exec('https://localhost:8080/?a=1&b=2') --> ["http://www.stackoverflow.com/questions/1/regex-for-getting-url-components-in-javascript", "https", "localhost", "8080", "", "a=1&b=2"]

修改

为了澄清，我需要的是一个创建代表URl的对象的小代码。然后我必须能够修改参数，模式等组件，并再次将结果作为字符串。 AFAIK，我不能用本地位置对象做这个，但我一定是错的。

代码的大小必须特别小，因为必须在页面标题中同步加载。它最终可能会被复制到每个页面而不是作为外部文件包含在内。所以，起初，我宁愿不依赖外部依赖。

Answer 1

获取没有正则表达式的部件的基本思路。

function parseUrl(url) {
  var a = document.createElement("a");
  a.href = url;

  var obj = {};
  var parts = ['protocol', 'hostname', 'host', 'pathname', 'port', 'search', 'hash', 'href'];

  parts.forEach(function(val) {
    obj[val] = a[val]
  });

  return obj;

}

console.log(parseUrl("http://localhost:8080/foo?bar=1"));
console.log(parseUrl("http://www.example.com#test"));

根据您的编辑，您始终可以创建一个对象并覆盖toString（）方法以输出更改。（下面可能不完美，写得很快）

    function parseUrl(url) {
      var a = document.createElement("a");
      a.href = url;

      function URL() {} 
      var obj = new URL();
      var parts = ['protocol', 'hostname', 'host', 'pathname', 'port', 'search', 'hash', 'href'];

      parts.forEach(function(val) {
        obj[val] = a[val]
      });
      
      URL.prototype.toString = function () {  
         var  out = this.protocol + "//" + this.host + this.pathname + this.search + this.hash;
          return out;
      
      }

      return obj;

    }

    var xxx = parseUrl("http://localhost:8080/foo?bar=1");
    xxx.hash = "#newHash";
    xxx.search = "?boom=new";
    console.log(xxx.toString());

Answer 2

现代浏览器完全支持URL API：

url = new URL('http://www.stackoverflow.com/questions/1/regex-for-getting-url-components-in-javascript')

document.write("<pre>" + JSON.stringify(url,null,3))

查看here填充物。

如果您需要小型和正则表达式的东西，请选择Steven Levithan的parseUri。

Answer 3

知道了，我想：

var regex = /([a-zA-Z]+?)\:\/\/(.+?)\:?([\d]+?)?\/(.+?)?\?(.*)/ig;
var url = 'http://www.example.com/path/morePath/PathHere/?version=1#hashHash';
var url2 = 'http://localhost:8080/?test=1';
console.log(regex.exec(url));
regex = /([a-zA-Z]+?)\:\/\/(.+?)\:?([\d]+?)?\/(.+?)?\?(.*)/ig;
console.log(regex.exec(url2));

用于在Javascript

3 个答案: