main.js

function init() {
    var url = window.location.href;
    extractUriParams(url, extractionSchema, 'extraction_form');
}

function extractUriParams(uri, extractionSchema, parentElementId) {
    var uriParts = getUriParts(uri);

    for (var i = 0; i < extractionSchema.length; i++) {
        var part = extractionSchema[i];
        if (isString(part)) {
            var palceholder = placeholderDictionary[part] || part;
            createExtractionField(part, uriParts[part], palceholder, parentElementId);
        }
        else if (isArray(part)) {
            if (part.length === 1) {
                var placeholder = placeholderDictionary[part[0]] || part[0];
                createExtractionField(part[0], uriParts[part[0]], placeholder, parentElementId);
            }
            else {
                var keys = [];
                var values = [];
                var placeholderParts = [];
                for (var j = 0; j < part.length; j++) {
                    if (isString(part[j])) {
                        if (j + 1 < part.length && isArray(part[j + 1])) {
                            var subkeys = [];
                            var subvalues = [];
                            for (var k = 0; k < part[j + 1].length; k++) {
                                subkeys.push(part[j + 1][k]);
                                subvalues.push(uriParts[part[j]][part[j + 1][k]]);
                            }
                            var parentPlaceholder = placeholderDictionary[part[j]] || [part[j]];
                            var placeholderPart = parentPlaceholder + ' (' + subkeys.join(', ') + ')';
                            placeholderParts.push(placeholderPart);
                            keys.push(part[j] + keyLevelIndent + subkeys.join(bottomKeySplitter));
                            values.push(subvalues.join(bottomValueSplitter));
                        }
                        else {
                            var placeholderPart = placeholderDictionary[part[j]] || part[j];
                            placeholderParts.push(placeholderPart);
                            keys.push(part[j]);
                            values.push(uriParts[part[j]]);
                        }
                    }
                }
                createExtractionField(keys, values, placeholderParts, parentElementId);
            }
        }
    }
}

function getPartPlaceholder(part) {
    var placeholder = '';

    if (isString(part)) {
        return placeholderDictionary[part] || part;
    }
    else if (isArray(part)) {

    }

    return placeholder;
}

function createExtractionField(label, value, placeholder, parentElementId) {
    var parentEl = document.getElementById(parentElementId);
    var divEl = document.createElement('div');
    label = formatLabel(label);
    value = formatValue(value);
    placeholder = formatPlaceholder(placeholder);

    var labelEl = document.createElement('label');
    labelEl.innerHTML = label + ':';
    labelEl.setAttribute('for', label);

    var inputEl = document.createElement('input');
    inputEl.value = value;
    inputEl.setAttribute('id', label);
    inputEl.setAttribute('type', 'text');
    inputEl.setAttribute('placeholder', placeholder);

    divEl.appendChild(labelEl);
    divEl.appendChild(inputEl);
    parentEl.appendChild(divEl);
}

function getUriParts(uri) {
    var link = document.createElement('a');
    link.setAttribute('href', uri);

    return {
        full: uri,
        base: link.hostname,
        protocol: link.protocol.replace(':', ''),
        port: link.port,
        path: link.pathname,
        hash: link.hash.replace('#', ''),
        param: getUriParamDictionary(uri)
    }
}

function getUriParamDictionary(uri) {
    var paramRegex = new RegExp(/[&?;]([^&?#;]*?)=([^&?#;]*)/g);
    var paramDictionary = {};

    while (match = paramRegex.exec(uri)) {
        paramDictionary[match[1]] = match[2];
    }

    return paramDictionary;
}

function formatLabel(label) {
    if (isString(label)) {
        label = keyPrepend + label;
    }
    else if (isArray(label)) {
        label = keyPrepend + label.join(topKeySplitter)
    }

    return label;
}

function formatValue(value) {
    if (value == undefined) {
        value = '';
    }
    else if (isArray(value)) {
        value = value.join(topValueSplitter);
    }

    return value;
}

function formatPlaceholder(placeholder) {
    if (isArray(placeholder)) {
        placeholder = placeholder.join(' & ');
    }

    return placeholder;
}

function isString(object) {
    return typeof object === 'string' || object instanceof String;
}

function isArray(object) {
    return object && typeof object === 'object' && object.constructor === Array;
}

var placeholderDictionary = {
    full: 'full url',
    base: 'base url',
    protocol: 'url protocol',
    port: 'url port',
    path: 'url path',
    hash: 'url hash',
    param: 'url parameters'
}

var extractionSchema = [
    "full",
    "base",
    "protocol",
    ["param", ["utm_source"]],
    ["param", ["utm_source", "utm_medium"]],
    ["protocol", "base"]
];

var keyPrepend = 'URL-';
var topKeySplitter = '-';
var bottomKeySplitter = '__';
var keyLevelIndent = ':';
var topValueSplitter = ',';
var bottomValueSplitter = ',';

window.onload = init;