2016-03-03 177 views
2

我有一個網頁了一系列關於它<a>鏈接查詢字符串參數看起來像這樣:從HREF獲取標籤

<a href="http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary">click me</a> 

這些參數操縱鏈接到最終頁面(「以外的內容.jsf「)以較小的方式。

作爲A/B/n測試的一部分,我想根據用戶在包含鏈接的頁面上的行爲來更改href中的參數。因此,例如,我想在點擊之前將水果參數更改爲「橙色」。

我的問題是參數更改字符串中的位置,或者可能根本不存在某些鏈接,而.param()函數只能在url上工作。

到目前爲止(基於另一個問題的答案)我有這個,但它沒有考慮到可能沒有「end_pos」或href中缺少「fruit =」的可能性(儘管這第二位好像有如果未定義型功能更簡單的修復):然後

$('a').each(function() { 
    if ($(this).attr('href').indexOf('other') > -1) { 
     var hrefStr = $(this).attr('href'); 
     var start_pos = hrefStr.indexOf('fruit=') + 1; 
     var end_pos = hrefStr.indexOf('&',start_pos); //works as long as fruit=apple is in the middle or front of the string 
     var fruit = hrefStr.substring(start_pos,end_pos); 
     ... 
     //put modified href back in <a> 
    } 
}); 

我的第二個問題是標識原始HREF的相同部分,使新的字符串回。儘管理解了解壓縮的方法,但我可能會在理解後首先解決這個問題。

我還要說,我有過我用這個功能來做到這一點比通過JavaScript

回答

1

你可以使用Attribute Contains Selector [name*="value"] "a[href*=fruit]"選擇包含"fruit"a元素在href屬性,.attr(attributeName, function)String.prototype.replace()"orange"

$("a[href*=fruit]").attr("href", function(_, href) { 
 
    return href.replace(/apple/, "orange") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<a href="http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary">click me</a>
替換

+0

我很喜歡這個;緊湊並解決整個問題 – tymothytym

1

其他.jsf頁面無法控制:

function getQueryParameters (str) { 
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0]; 
} 

var queryParams = getQueryParameters(myUrl); 

結果:

{ 
    "fruit": "apple", 
    ... 
} 
1

繼承人一種我用來提取網址參數的方法!

var getUrlParameter = function(sParam,url) { 
    var sPageURL = url; 
    if(typeof(sPageURL) === 'undefined' || sPageURL == ''){ 
     sPageURL = decodeURIComponent(window.location.search.substring(1)); 
    } 
    var sURLVariables = sPageURL.split('&'), sParameterName, i; 

    for (i = 0; i < sURLVariables.length; i++) { 
     sParameterName = sURLVariables[i].split('='); 

     if (sParameterName[0] === sParam) { 
      return sParameterName[1] === undefined ? true : decodeURI(sParameterName[1]); 
     } 
    } 
}; 

使用

getUrlParameter('fruit',url_after_question_mark); 

部分你的問題2! 如果您的參數是已知的或至少已知的集合,您可以隨時重新創建具有新值的網址。

例如 var params = ['fruit','tree','some_other','some_other2']; //所有可能參數的超集。

現在,您可以循環訪問該數組,並使用每個參數調用getUrlParameter函數來查看它是否存在。如果它存在重新構建您的網址與新鮮的價值。

只是爲了澄清,該功能getUrlParameters將返回未定義任何PARAM沒有發現,丟棄它的基礎上的typeof不確定的,然後重建網址與你的新值

1

而不是substrsplit params分開,並與他們合作。這裏有詳細的例子來幫助。

var url = 'http://www.domain.com/page/other.jsf?fruit=apple&tree=pine&rock=sedimentary'; 

/** 
* Gets params from url as an object 
* @param {String} url 
* @return {Object} 
*/ 
var getParams = function (url) { 
    var params = {}; 
    var match = url.match(/\?(.*)$/); 

    if (match && match[1]) { 
     match[1].split('&').forEach(function (pair) { 
      pair = pair.split('='); 
      params[pair[0]] = pair[1]; 
     }); 
    } 

    return params; 
}; 

/** 
* Converts an object of params into a query string. 
* @param {Object} params 
* @return {String} 
*/ 
var paramsToString = function (params) { 
    return Object.keys(params || {}).map(function (key) { 
     return key + '=' + params[key]; 
    }).join('&'); 
}; 

/** 
* Replaces url params. 
* @param {String} url 
* @param {Object} newParams 
* @return {String} 
*/ 
var changeParams = function (url, newParams) { 
    var params = getParams(url); 

    Object.assign(params, newParams); 
    return url.replace(/\?(.*)$/, function() { 
     return '?' + paramsToString(params); 
    }); 
}; 

var urlWithNewParams = changeParams(url, { 
    fruit: 'banana', 
    weasel: 'yes', 
}); 

console.log(urlWithNewParams); // http://www.domain.com/page/other.jsf?fruit=banana&tree=pine&rock=sedimentary&weasel=yes