asked on

How can I use jquery to parse out parameters from an encoded url with custom separators and place them into a string with pre-defined positions?

My goal is to extract values from name-value pairs within a URL and return those values into a string that can be inserted into a web tracking tag. Th using a js function. The string has fifteen positions separated by "-_-". No matter where each name-value pair appears within the URL, values most always be inserted into the same position within the tracking tag string. For example, the value(s) for the name apple must always appear in the first position, the value(s) for the name banana must always appear in the second position, and the value(s) for the name watermelon must always appear in the fifth position.

The URL will have a pound sign followed by an indefinite number of name-value pairs (up to 15). The name value pairs, connectors, and separators are encoded. Values are strings that may be joined by "+" symbol. Finally, Names may appear multiple times within the URL, each time with a different value. However, since names only exactly one corresponding spot within the tracking tag string, the associated values must be joined into the same position (using "+").

Example URL:
http:www.mysite.com#currentPage=1&c%5B%5D=e%3A1119//e+apple//%3Aeq//red&c%5B%5D=e%3A1119//e+banana//%3Aeq//yellow+black&c%5B%5D=e%3A1119//e+watermelon//%3Aeq//red&c%5B%5D=e%3A1119//e+watermelon//%3Aeq//black

Example function using the tracking tag string created from above:
cmCreateElementTag("Tracking Parent", "Tracking Child","red-_-yellow+black-_--_--_-red+black-_--_--_--_--_--_--_--_--_--_-");

I'd like to use jquery to extract the values from the URL and place them in the right position within the tracking tag string.

Rob

http://jsbin.com/bevivehaka/1/edit?js,console#J:L1

var myindex = {
	apple: 1,
	banana: 2,
	watermelon: 5
};
var myurl = "http://www.mysite.com#currentPage=1&c%5B%5D=e%3A1119//e+apple//%3Aeq//red&c%5B%5D=e%3A1119//e+banana//%3Aeq//yellow+black&c%5B%5D=e%3A1119//e+watermelon//%3Aeq//red&c%5B%5D=e%3A1119//e+watermelon//%3Aeq//black";

$(function() {
	var querystring = myurl.substring(myurl.indexOf('#')+1);
	var vars = decodeURIComponent(querystring).split('&');
	var results = {};
    for (var i = 1; i < vars.length; i++) {
        var pair = vars[i].split('=');
		var vals = pair[1].split('//');
		var fruit = vals[1].substring(2);
		var color = vals[3];
		if (results[fruit] === undefined) {
			results[fruit] = color;
		}
		else {
		  results[fruit] += "+" + color;
		}
    }
	console.dir(results);
	var tracking = Array.apply(null, new Array(15)).map(String.prototype.valueOf,"");
	$.each(results, function(i, el) {
		tracking[myindex[i]] = el;
	});
	console.log('cmCreateElementTag("Tracking Parent", "Tracking Child",'+tracking.join("-_-")+')');
});

function parseQueryString(query) {
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Query variable %s not found', variable);
}

Open in new window

JJ2357

ASKER

Thanks, Rob. Works great, with the exception of prepending "-_-" to the beginning of the string and not including double quotes around the string.
Result:

 -_-red-_-yellow+black-_--_--_-red+black-_--_--_--_--_--_--_--_--_-

Open in new window

Expected result:

"red-_-yellow+black-_--_--_-red+black-_--_--_--_--_--_--_--_--_-"

Open in new window

Additionally, in the event that the URL contains an unencoded name-value pair, the function fails. For example, if you append &name=value to the end, an undefined error is returned.

Rob

Ok i've updated the code as the index was out by 1 (zero based array - first element is at index 0) http://jsbin.com/xukaso/1/edit?js,console#J:L1

As for the additional variables in the querystring, given that they weren't in your original spec, I haven't accounted for them. So What are the variables that need to be parsed? Will they always be the c[] variable or ?

ASKER CERTIFIED SOLUTION

Rob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JJ2357

ASKER

works like a charm, tx.

Rob

not a problem. Sounds like that's solved it for you. If so, go ahead and close the question: http://support.experts-exchange.com/customer/portal/articles/608621

JJ2357

ASKER

Sorry for not being clear in the original. Thanks for the extra work.