如何在 HTML 段落中添加 URL 变量答案

【问题标题】：How to add URL variable in HTML paragraph如何在 HTML 段落中添加 URL 变量
【发布时间】：2017-08-30 17:29:14
【问题描述】：

我是 HTML 新手。我用谷歌搜索了这个问题并尝试了一些代码，但没有成功，所以我在这里寻求帮助。

我想要实现的目标： 替换 ??在带有来自 URL 的值的 HTML 段落中（例如：http://mysite.html?name=Ryan）

<p> Hello ??<br> Thanks for answering my question</p>

我的问题： 1. 这个 Javascript 应该从 URL 中提取 Ryan - 正确吗？

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var urlVar = getParameterByName('name');
});
</script>

如果问题 1 中的代码是正确的，我如何将值放在 urlVar（即 Ryan）而不是 ??在 HTML 段落内？

【问题讨论】：

在段落中有一个带有 id 的 span 元素并替换它会更有意义....
urlVar 是不是您期望的值？我不太清楚这里具体要问什么。
@yuriy636 我认为 javascript 代码提取了 Ryan，我的问题是如何将 Ryan 的值放在 HTML 段落中，以便呈现在浏览器上：“您好 Ryan，感谢您回答我的问题”
这几乎就是你要找的东西：stackoverflow.com/questions/15618470/… 唯一的问题是你需要找到一种方法来选择段落，尽管它没有 id 或类。（或者像建议的评论或下面的答案一样调整您的 HTML）。

标签： javascript html

【解决方案1】：

你的 URL 中有 hashbang 吗？你可以试试这个：

    function getParameterByName = function(name, useHash) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(useHash ? location.hash : location.search);
        return results === null ? undefined : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

将 true 或 false 作为 useHash 参数传递

【讨论】：

【解决方案2】：

我假设 HTML 已经渲染，然后使用 javascript。

在这种情况下，您需要有一个手柄来替换它。

 Hello ?? Thanks for answering my question

现在在 Javascript 代码中，您可以使用如下内容：

var urlVar = getParameterByName('name');
 document.getElementById('username').innerHTML = urlVar;

编辑：  Hello ?? Thanks for answering my question

使用 Jquery document.ready 在 DOM 渲染完成后执行代码

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
      // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var urlVar = getParameterByName('name');
    document.getElementById('username').innerHTML = urlVar;
});
</script>

【讨论】：

将您的代码复制粘贴到我的网站，但它不起作用 - 有什么想法吗？
可能是因为他对你的函数的重制需要一个参数和原来的两个？
不确定我是否犯了错误。尽管在您发布的代码中我确实看到了 });在代码的末尾。如果您发布的代码就是所有内容，那么它不应该是这样。如果这就是你所拥有的一切，你的代码也永远不会被执行。
@NineMagics 不，他的代码实际上只能使用我所看到的“名称”参数。如果未指定 url，则采用当前 url。
@spoofie 该脚本确实提取了 url 变量值（即 Ryan），但它没有放置它而不是 ??在“用户名”中