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

Question

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

基本上我会有我的常规识别搜索框：

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

用户会搜索一些东西，但我需要一个 JavaScript 或 jQuery 代码，当客户在 Search.asp 页面上时，它会从 URL 字符串中的“搜索”变量中获取值并将其添加为“值”到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 plugin（您真正无耻地编写）来提取 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（将设置为输入的value 并显示为undefined 字符串） .

jQuery

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

jsFiddle.

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