根据 URL 字符串中的变量填充属性值

Question

假设我在我的网站上的一个页面上： http://www.example.com /SearchResults.asp?Search=stackoverflow。是否可以使用 JavaScript 或 jQuery 代码从 URL 字符串中获取变量“search”并将其填充到搜索框的值中？

基本上，我将拥有常规识别的搜索框：

<input type="text" title="Search" id="search_box" />

用户将搜索某些内容，但我需要 JavaScript 或 jQuery 代码，当客户进行搜索时，该代码将从 URL 字符串中的“搜索”变量获取值.asp 页面并将其作为“值”添加到 input#search 中。

因此，用户将在此页面上： http://www.example.com/SearchResults。 asp?Search=stackoverflow 搜索框将如下所示：

<input type="text" title="Search" id="search_box" value="stackoverflow" />

谢谢

Answer 1

您可以尝试这个函数：

function getSearchVariable(variable) 
{
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){
            return unescape(pair[1]);
        }else{
            return false;
        }
    }
}

如果您上面提到的示例中存在此函数，那么您只需调用 getSearchVariable("Search") 即可返回“stackoverflow”。

因此，在您的页面中，您将有一个如下所示的脚本元素：

<script type="text/javascript">
    function getSearchVariable(variable) 
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return unescape(pair[1]).split("+").join(" ");
            }else{
                return "";
            }
        }
    }

    $(document).ready(function(){
        $("#search_box").val(getSearchVariable("Search"));
    });
</script>

希望有帮助！

Answer 2

您可以使用 JQuery URI 插件（真正由您无耻地编写）来提取 URL 的任何部分：具体来说， $.uri(window.location.href).at("query").search 会为所述 URL 生成“stackoverflow”。

总体流程是注册一个回调（在页面加载时触发）来分析 URL 并设置该表单元素的值，即：

<script>
  $(document).ready(function () {  
    $('#Search').val($.uri(window.location.href).at("query").search); 
  })
</script>

Answer 3

JavaScript

document.getElementById('Search').value = [(window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1]];

jsFiddle。

用 [] 包装它意味着如果找不到该值，它将返回一个空字符串而不是 undefined （它将被设置为输入的 值 并显示为 undefined 字符串）。

jQuery

$('#Search').val(function() {
    return (window.location.search.match(/(?:^|[&;])Search=([^&;]+)/) || [])[1];
});

jsFiddle。

(/* get GET param */ || []) 的作用是，如果未找到 GET 参数，代码不会出错。