JS解析URL的实用技巧分享

const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#hash';
const url = new URL(urlString);

console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "www.example.com"
console.log(url.port);       // "8080"
console.log(url.pathname);   // "/path/to/resource"
console.log(url.search);     // "?param1=value1&param2=value2"
console.log(url.hash);       // "#hash"
console.log(url.searchParams.get('param1')); // "value1"

URL构造函数会将URL字符串解析成一个对象，这个对象包含了URL的各个部分，你可以通过访问对象的属性来获取这些信息。searchParams属性尤其有用，它允许你方便地获取和操作URL中的查询参数。

function parseURL(url) {
  const a = document.createElement('a');
  a.href = url;
  return {
    protocol: a.protocol,
    hostname: a.hostname,
    port: a.port,
    pathname: a.pathname,
    search: a.search,
    hash: a.hash,
    origin: a.origin,
  };
}

const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#hash';
const parsedURL = parseURL(urlString);

console.log(parsedURL.protocol);   // "https:"
console.log(parsedURL.hostname);   // "www.example.com"
console.log(parsedURL.port);       // "8080"
console.log(parsedURL.pathname);   // "/path/to/resource"
console.log(parsedURL.search);     // "?param1=value1&param2=value2"
console.log(parsedURL.hash);       // "#hash"

这种方法的优点是不需要额外的库，但缺点是需要操作DOM，效率相对较低。而且，对于一些特殊的URL，可能存在解析不正确的情况。

使用字符串操作

如果你只需要提取URL中的某一部分信息，或者需要兼容一些老旧的浏览器，那么可以使用字符串操作。例如，可以使用split()、substring()、indexOf()等方法来提取URL中的协议、域名、路径、查询参数等等。

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#hash';
const param1Value = getParameterByName('param1', urlString);

console.log(param1Value); // "value1"

这种方法的优点是灵活，可以根据自己的需求来提取URL中的信息。缺点是代码比较繁琐，容易出错，并且需要自己处理URL编码等问题。

如何处理相对URL

URL构造函数可以很好地处理相对URL，只需要提供一个base URL即可。

const relativeURL = '/path/to/resource?param1=value1';
const baseURL = 'https://www.example.com';
const url = new URL(relativeURL, baseURL);

console.log(url.href); // "https://www.example.com/path/to/resource?param1=value1"

如果没有提供base URL，URL构造函数会尝试将相对URL解析为绝对URL，如果解析失败，则会抛出错误。

如何处理URL编码

URL中的一些字符需要进行编码，例如空格、特殊字符等等。URL构造函数会自动处理URL编码，你不需要手动进行编码和解码。

const urlString = 'https://www.example.com?param=value with spaces';
const url = new URL(urlString);

console.log(url.searchParams.get('param')); // "value with spaces"

如果你使用字符串操作来解析URL，那么需要自己处理URL编码。可以使用encodeURIComponent()和decodeURIComponent()方法来进行编码和解码。

为什么选择URL构造函数

虽然其他方法也能解析URL，但我仍然推荐使用URL构造函数，原因如下：

• 简单易用： API简洁明了，容易上手。
• 功能强大： 可以处理各种复杂的URL情况，包括相对URL、URL编码等等。
• 性能良好： 原生API，性能比字符串操作更好。
• 标准API： 现代浏览器都支持，兼容性好。

当然，具体选择哪种方法取决于你的实际需求。如果只需要提取URL中的某一部分信息，或者需要兼容一些老旧的浏览器，那么可以使用字符串操作。但如果需要处理复杂的URL情况，或者需要更好的性能，那么URL构造函数是更好的选择。

今天关于《JS解析URL的实用技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于JavaScript,字符串操作,标签,URL解析,URL构造函数的内容请关注golang学习网公众号！