如何从 window.location 中提取哈希子字符串值并将它们写入 HTML？答案

【问题标题】：How to extract hash substring values from window.location and write them into HTML?如何从 window.location 中提取哈希子字符串值并将它们写入 HTML？
【发布时间】：2012-08-30 21:35:11
【问题描述】：

我正在尝试从 window.location 中提取哈希子字符串值并将它们写入 HTML 以供用户查看，其 URL 语法不允许使用 ? 作为查询字符串分隔符。

所以我正在处理这个简单的页面：

<html>

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        window.location = (window.location);
        GetURLParameter('source');  
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            alert(sParameterName[1]);
            return sParameterName[1];
        }
    }
} 
</script>

</html>

我使用如下所示的 URL 调用页面，这是客户端 window.location：

http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED

我想在页面中写入 FOO、BAR、FRED，以便用户看到。

（注意 URL 中没有 ? 作为查询字符串分隔符，只是 #）

...点击输入按钮时，我收到一个成功的警报（如预期的那样），显示来自 URL 的源“FOO”。太好了。

但是如何获取另外两个 SParamaterNames，然后如何将它们作为 HTML 写入页面以供用户查看，而不是返回警报？

更新更新更新（下）

谢谢@sam-baker！！ ......很好的答案。我使用了您的第一个示例，但将代码中的前两行更改为 $(window).load(function() { 以便脚本在加载时运行，这是我的意图。

所以，我仍在使用相同的 URL：

http://example.com/pagename.html#source=FOO&medium=BAR&campaign=FRED

但我想将哈希子字符串值插入到硬编码的 HTML 中，如下所示：

<body>
<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />

我将通过将 span 或 div 样式硬编码到 HTML 中来单独设置每个值的样式。

更新更新更新

解决方法如下：

使用此 URL 语法在下面的代码示例中点击以下简单页面，它会将子字符串 vars 输出给用户 onload，无论您希望它们在页面上的任何位置。

http://example.com/pagename.html#dyntext=FOO+MAN+CHU&dynterm=BAR+HOPPING&dynimage=FRED+IS+DEAD



<html>
<body>

<span id="dyntext-span" style="font-weight: bold;"></span><br />
<span id="dynterm-span" style="font-style: italic;"></span><br />
<span id="dynimage-span" style="text-decoration: underline;"></span><br />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(document).ready(function() {
        var tags = ["dyntext", "dynterm", "dynimage"];
        for (var i = 0; i < tags.length; ++i) {
            var param = GetURLParameter(tags[i]);
            if (param) {
                var dyntext = GetURLParameter('dyntext');
                var dynterm = GetURLParameter('dynterm');
                var dynimage = GetURLParameter('dynimage');
            }
        }

        var elem = document.getElementById("dyntext-span");
        var text = document.createTextNode(dyntext);
        elem.appendChild(text);
        var elem = document.getElementById("dynterm-span");
        var text = document.createTextNode(dynterm);
        elem.appendChild(text);
        var elem = document.getElementById("dynimage-span");
        var text = document.createTextNode(dynimage);
        elem.appendChild(text);     
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
}

</script>

</body>
</html>

有一些跨浏览器问题，因为 Firefox 不支持 innerText，不想处理跨浏览器回退到 textContent 等，所以只是遍历 DOM 树并创建文本节点，替换 + unicode带空格的字符。希望对你有用！

【问题讨论】：

标签： javascript query-string substring window.location url-parameters

【解决方案1】：

您只使用以下方式请求 3 个参数中的第一个：

GetURLParameter('source');

如果您想要所有 3 个参数并且知道名称，则可以使用：

var source = GetURLParameter('source');
var medium = GetURLParameter('medium');
var campaign = GetURLParameter('campaign');

要将这些变量添加到页面中，您可以将它们插入到 div 中，如下所示：

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        // Iterate through a known list of tags
        var tags = ["source", "medium", "campaign"];
        for (var i = 0; i < tags.length; ++i) {
            var param = GetURLParameter(tags[i]);
            if (param) {
                var div = document.createElement('div');
                div.innerText = param;
                div.className = "query-string-param";
                document.body.appendChild(div);
            }
        }
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);

    console.log(sPageURL);

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
} 
</script>

</html>

该版本查询 3 个标签中的每一个，并在页面中为该标签创建一个新的 div，并将标签的值作为内容。

它还向这些 div 添加了一个 CSS 类 query-string-param，以便您可以设置文本样式 - 大概您会想要这样做，并为每个 div 添加更多 HTML，因为尚不清楚为什么该文本是显示出来。

如果您事先不知道查询字符串键（来源、媒体和活动），您可以使用我创建的函数 GetAllURLParameters，它返回一个对象数组，其中包含键（“来源”）和值（ "FOO") 为每个参数。

看起来像这样：

<input type="button" id="test" value="Test" />
<!-- input buton is here just to test the script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
$(function() {
    $('#test').click(function() {
        // Iterate through a known list of tags
        var params = GetAllURLParameters();
        for (var i = 0; i < params.length; ++i) {
            var param = params[i];
            var div = document.createElement('div');
            div.innerText = "Value of param '" + param.key + "' is '" + param.value + "'";
            div.className = "query-string-param";
            document.body.appendChild(div);
        }
    });
});

function GetURLParameter(sParam) {
    var sPageURL = window.location.hash.substring(1);

    console.log(sPageURL);

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
} 

function GetAllURLParameters() {
    var sPageURL = window.location.hash.substring(1);
    var params = [];
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        params.push({
            key: sParameterName[0],
            value: sParameterName[1]
        });
    }
    return params;
}
</script>

</html>

然后显示所有查询参数的名称和值。

更新

由于您已经拥有如下所示的硬编码 HTML：

<span class="style1">$need_source_value_here</span><br />
<span class="style1">$need_medium_value_here</span><br />
<span class="style3">$need_campaign_value_here</span><br />

插入值的最简单方法是为每个跨度添加一个 id：

<span id="source-span" class="style1"></span><br />
<span id="medium-span" class="style1"></span><br />
<span id="campaign-span" class="style3"></span><br />

然后查询参数后，可以这样插入：

var source = GetURLParameter('source');
document.getElementById('source-span').innerText = source;
var medium = GetURLParameter('medium');
document.getElementById('medium-span').innerText = medium;
var campaign = GetURLParameter('campaign');
document.getElementById('campaign-span').innerText = campaign;

【讨论】：

这是一个很好的答案！！ ...我将通过基于我们的代码的编辑来进一步澄清我的问题。我希望你能看看。
在这种情况下非常简单，用这些更改更新了我的答案。使用 Javascript/DOM API 可以轻松查找和修改 DOM 元素。如果你想让一切都使用 jQuery（在这种情况下真的没有必要），你可以使用 $('#source-span').text(source) 而不是 document.getElementById('source-span').innerText = source;。不过这样会慢一些。
山姆，你是男人中的神。谢谢！ ...发布我的最终代码作为我的问题的更新。