javascript - 用户输入 URL

Question

我有一些网址，我需要用 input type="text"中的用户输入替换其中的某些部分，并通过单击按钮移动到新链接。
如何在 URL 中放置变量？

//some-url/trends.cgi?createimage&t1=1412757517&t2=1412843917&assumeinitialstates=yes&assumestatesduringnotrunning=yes&initialassumedhoststate=0&initialassumedservicestate=0&assumestateretention=yes&includesoftstates=no&host= SCP-3&service=修改+时间+EDR+文件&backtrack=4&zoom=4

我有函数，但它将输入放在网址末尾。

function redirect() {
    var baseUrl = 'http://google.com.ua/';

    document.myform.action=baseUrl + document.getElementById('url').value;
}

<form name="myform" method="post" onsubmit="redirect()">
    <input type="text" id="url">
    <input type="submit" value="submit">
</form>

Answer 1

您可以构建手动查询字符串解析器和构造函数，示例如下:

function parseQuery(qstr){
    var query = {};
    var a = qstr.split('&'); //take the passed query string and split it on &, creating an array of each value
    for (var i in a) { //iterate the array of values
        var b = a[i].split('='); //separate the key and value pair
        query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]); //call decodeURIComponent to sanitize the query string
    }

    return query; //returned the parsed query string object
}

function buildQuery(obj){
    var str = [];
    for(var p in obj) //iterate the query object
       if (obj.hasOwnProperty(p)) { //check if the object has the propery name we're iterating
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); //push the encoded key value pair from the object into  the string array
       }
    return str.join("&"); //take the array of key value pairs and join them on &
} 

然后下面我们以您给出的字符串为例:

var $str = 'createimage&t1=1412757517&t2=1412843917&assumeinitialstates=yes&assumestatesduringnotrunning=yes&initialassumedhoststate=0&initialassumedservicestate=0&assumestateretention=yes&includesoftstates=no&host=SCP-3&service=MODIFICATION+TIME+EDR+FILES&backtrack=4&zoom=4';

现在我们对字符串调用 parseQuery 函数。

var obj = parseQuery($str);

然后我们迭代由 parseQuery 函数生成的对象

Object.keys(obj).forEach(function(k, i) {
    switch(k){
        case 't1':
            obj[k] = 'replacedt1';
            break;
        case 'service':
            obj[k] = 'replacedServices';
            break;
        case 'host':
            obj[k] = 'replacedHost';
    }         
});

现在 obj 变量具有新更新的值。我们可以通过传入对象来使用 buildQuery 函数重建查询。

console.log(buildQuery(obj));

这会产生类似的结果:

createimage=undefined&t1=replacedt1&t2=1412843917&assumeinitialstates=yes&assumestatesduringnotrunning=yes&initialassumedhoststate=0&initialassumedservicestate=0&assumestateretention=yes&includesoftstates=no&host=replacedHost&service=replacedServices&backtrack=4&zoom=4 

As usual, the jsFiddle