PHP和JS解析url获取相关信息

admin

PHP解析URL
3 U. E! b1 X+ d+ B  Z; S& aPHP解析url时经常使用【pathinfo】函数，但是经常会遇到各种奇葩问题，所以今天我们使用【parse_url】来解析url。
最开始我想着参数不多就自己直接在用户设置的url后拼接参数，代码如下：
7 I6 t3 \& B) Z

复制代码
//第三方设置的url
$url = 'https://test.cn';
//平台需要拼接的参数
$code = '标识码';
$url .= '?code='.$code

但是到了后期，发现设置的url中可能带有参数，此时代码就不能这么写了，否则就会出现两个【?】及重复的参数，于是封装了一个，完整代码如下：
" ]1 C5 m, @$ a& z2 c6 t+ k

复制代码
<?php
public static function getParseUrl($url)
{
    $urlInfo = parse_url($url);
    $query = [];
    if(!empty($urlInfo['query'])){
        $query_params = explode('&',$urlInfo['query']);
        foreach ($query_params as $item) {
            list($key, $value) = explode('=', $item);
            $query[$key] = $value;
        }
    }
    $path = $urlInfo['scheme'].'://'.$urlInfo['host'];
    if(isset($urlInfo['path'])) $path = $path.$urlInfo['path'];
    return [
        'path'=>$path,
        'query'=>$query
    ];
}

//解析url
$urlInfo = Utils::getParseUrl($app->h5_auth_url);
//自己需要拼接的参数
$param = ['code'=>'测试标识'];
//合并所有参数到一个数组中
$query = array_merge($urlInfo['query'],$param);
//拼接完成url
$url = $urlInfo['path'].'?'.http_build_query($query);

其中【parse_url】函数是PHP内置函数，主要作用就是解析url，大致结果如下：
1 }* r* c- N: ]6 v* \7 v

{
    "scheme":"http",
9 Y. G& p! V2 W8 y; P/ x. O    "host":"test.cn",
& f6 w5 ^/ ^3 k9 h! k0 C% r+ w# z    "path":"/a/c",
    "query":"a=1&b=2"
7 L, k5 V7 d* m; f* Z- P- B0 N5 `}

) d4 e( o, i7 O# h如果url只有域名和参数时，返回的结果中没有【path】这个字段。如果url中没有参数，返回的结果中也没有query这个字段
/ S$ Z; ]: ?& a9 d& v从上面的结果可以看出query没有结构化，我们需要将query进行解析成数组的形式，解析代码如下：
& U2 r6 a& o* L4 n( n& H2 C  G

复制代码
//定义一个容器接受解析后的参数
$query = [];
$query_params = explode('&',$urlInfo['query']);
foreach ($query_params as $item) {
    list($key, $value) = explode('=', $item);
    $query[$key] = $value;
}

到此PHP解析url的代码就已经说明清楚了。
7 C% u/ @& D6 S6 p% K/ t* T; f# L* ?; sJS解析URL
js解析URL代码与PHP大致相同，只是将【parse_url】换成【new URL】对象，完整代码如下：

复制代码
function getParseUrl(url) {
  let urlObj = new URL(url)
  //解析参数
  let query_param = urlObj.search.replace('?', '');
  let query = {}
  if (query_param) {
    query_param = query_param.split('&');
    for (var i=0;i<query_param.length;i++) {
      let pair = query_param[i].split("=");
      query[pair[0]] = pair[1];
    }
  }
  
  return {
    'path': urlObj.origin + urlObj.pathname,
    'query':query
  };
}

注意：query可能为空，所以上述代码判断了参数是否存在
" E: U8 }5 h7 Q  B8 R2 n, {网上有很多人使用【urlObj.query】的方式获取请求参数，本人尝试过，很多时候是没有这个属性字段的，所以我使用了【urlObj.search】获取请求参数。