V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
iugo
V2EX  ›  分享创造

用 JavaScript 获取 URL 中任意存在的参数

  •  
  •   iugo ·
    iugo · 2015-03-28 11:31:54 +08:00 · 2605 次点击
    这是一个创建于 3638 天前的主题,其中的信息可能已经有所发展或是发生改变。
    - 新手, 期待意见.
    - 说明: 纯 JavaScript 实现, 没有用 jQuery.
    - 代码:

    根据 URL 获取参数 getParameterByURL

    最终并未完全按照以下想法实现.

    1. 是否有 ? 号. 如果有 if_question_mark = true , 如果没有 if_question_mark = false
    2. 是否有 & 号. 如果有 ampersand = 1 , 如果有两个 ampersand = 2 , 如果没有 ampersand = 0
    3. 将 ? 与 & 号之间取对象.
    • if_question_mark = false 则结束运行, 返回空.
    • if_question_mark = trueampersand = 0 则取 ? 与结尾处的字符串, 命名为 vartext[0] 待处理.
    • if_question_mark = trueampersand = 1 则取 ? 与 & 之间的字符串, 命名为 vartext[0] , 取 & 与结尾处的字符串, 命名为 vartext[1] 待处理.
    • 以此类推, 获得一个名为 vartext 的数组待处理.
    1. 将 vartext 数组进行处理并返回一个对象, 为 JSON 数据.
    • 定义一个变量 var validnum = 0
    • 判断 vartext 中是否有 = 号. 如果有, 取等号前的字符为 "key" , 取等号后的字符为 "val" , 并且 validnum++ . 如果没有, 则跳过运行.
    • 如果最后 var validnum != 0 取得一个 JSON 对象为 var parameter = {"key": "val","key": "val"}
    1. 获取参数例子
    • 例子: https://blog.clian.net/log/110?about=JavaScript&author=iugo
    • parameter.about = "JavaScript"; parameter.author = "iugo"
    view raw gistfile1.md hosted with ❤ by GitHub
    /**
    * 根据URL 获取参数
    * update: 2015-3-28 11:48:15 (+8)
    */
    function parameterURL() {
    var url = location.search;
    var url = '?abc=oo&ok=sss&key=%E5%91%B5%E5%91%B5&ss=kkk'; //测试数据
    var json = "";
    /**
    * 以下解析 URL, 分别取出其中的参数.
    */
    var regular = new RegExp('[^?=&]+=[^?&]+', 'g');
    regular.lastIndex = 0;
    var result = regular.exec(url);
    while(result != null){
    processData(result); // 自定义函数, 下面会说明
    var result = regular.exec(url);
    }
    /**
    * 以下将 JSON 字符串处理为 JSON 数据.
    */
    json = "{" + json.substring(0,json.length - 1) + "}";
    var jsonData = JSON.parse(json);
    return jsonData;
    /**
    * 函数功能: 将 k=v 形式的字符串写成 JSON 形式
    */
    function processData(data) {
    var regular = new RegExp('[^=]+', 'g');
    regular.lastIndex = 0;
    var result = regular.exec(data);
    var k = result;
    var result = regular.exec(data);
    var v = result;
    json = json + '"' + k + '":"' + v + '",';
    };
    };
    // 测试数据
    var v = parameterURL();
    var abc = v.abc;
    var key = decodeURI(v.key);
    document.write(abc + "<br />" + key);
    view raw gistfile2.js hosted with ❤ by GitHub


    想将其封装为一个类, 达成

    var id = new valueURL("id") // id = 123

    这样的效果. 但是还不知道该怎么下手.
    7 条回复    2015-09-30 16:37:33 +08:00
    loading
        1
    loading  
       2015-03-28 11:42:20 +08:00 via Android
    这应该发 问与答,创造问题不属于创造!
    iugo
        2
    iugo  
    OP
       2015-03-28 11:54:37 +08:00
    @loading 刚才我想了想, 没有作为类, 而是先写成了函数. JavaScript 怎么写类不明白. 不过功能已经实现, 可以正常用.

    我的写法和网上搜索到的不一样, 希望从另外一个角度给大家带来点什么东西.
    zrp1994
        3
    zrp1994  
       2015-03-28 12:04:46 +08:00   ❤️ 1
    @iugo 草草写了个,你感受下
    var parseQuery = function(string) {
    var urlSplit = string.split('?'), querySplit = [], queries = {};
    if(urlSplit.length < 2 || !urlSplit[1])
    return null;
    querySplit = urlSplit[1].split('&');
    for (var i = 0; i < querySplit.length; i++) {
    var query = querySplit[i].split('=');
    if(query.length > 0 && query[0])
    queries[query[0]] = query[1];
    };
    return queries;
    }

    console.log(parseQuery('https://www.baidu.com/s?ie=UTF-8&wd=%E6%B5%8B%E8%AF%95'));
    console.log(parseQuery('https://www.baidu.com/s?ie=UTF-8&=%E6%B5%8B%E8%AF%95'));
    console.log(parseQuery('https://www.baidu.com/s?ie=UTF-8&wd='));
    console.log(parseQuery('https://www.baidu.com/s?ie=UTF-8&='));
    console.log(parseQuery('https://www.baidu.com/s?ie=UTF-8'));
    console.log(parseQuery('https://www.baidu.com/s?'));
    console.log(parseQuery('https://www.baidu.com/s'));

    测试结果:
    { ie: 'UTF-8', wd: '%E6%B5%8B%E8%AF%95' }
    { ie: 'UTF-8' }
    { ie: 'UTF-8', wd: '' }
    { ie: 'UTF-8' }
    { ie: 'UTF-8' }
    null
    null
    ETiV
        4
    ETiV  
       2015-03-28 12:36:48 +08:00   ❤️ 1
    nowgoo
        5
    nowgoo  
       2015-03-28 13:37:02 +08:00   ❤️ 1
    function get_value(name, url) {
    return (url.substr(url.indexOf('?')).substr(1).match(new RegExp('(?:^|&)' + name + '=([^&]*)(?:&|$)', 'i')) || [])[1] || '';
    }
    sumhat
        6
    sumhat  
       2015-03-28 21:58:40 +08:00   ❤️ 1
    楼上的几位,对于有 # 的 URL,你们的代码肯定挂
    iugo
        7
    iugo  
    OP
       2015-09-30 16:37:33 +08:00
    @sumhat 在 @ETiV 的代码中, 稍微修改下正则应该就会好.

    /[?&]:?([^=]+)=([^&#]*)/g
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3141 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 14:02 · PVG 22:02 · LAX 07:02 · JFK 10:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.