【问题标题】:How can I get URL parameters to change my html text dynamically如何获取 URL 参数以动态更改我的 html 文本
【发布时间】:2021-08-20 00:39:44
【问题描述】:

我正在尝试在使用潜在客户页面构建的登录页面上使用一些动态文本。我不是 javascript 向导,所以请多多包涵。

我想获取 URL 参数 ?salon=NameOfSalon,以便在清空一些默认文本时自动相应地更改文本。

这是我目前得到的结果

function getParameterByName(name, 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, ' '));
}

var salon = getParameterByName('salon');

document.getElementById('salon').innerText = getParameterByName('salon');

但它只会在一个地方改变它,而不是所有地方,并且空时没有默认文本(我用过<span id="salon"></span>

希望它有意义!

【问题讨论】:

  • ID 应该是唯一的。如果要处理多个元素,请改用 class,然后循环它们(例如使用 for 循环)
  • 这能回答你的问题吗? How can I get query string values in JavaScript?
  • @cbender 我已经看过了,遗憾的是我对此的了解非常有限,以至于我无法弄清楚如何使用他们的示例。但是感谢您的链接并感谢您的回答。

标签: javascript url-parameters


【解决方案1】:

id 属性对于每个 HTML 元素应该是唯一的。如果您想将新的innerText 应用于多个元素,请尝试为每个元素分配一个已知类,然后使用getElementsByClassName 获取对它们的引用。

例如,

var elements = document.getElementsByClassName('salon-class');
for (var element of elements) {
  element.innerText = getParameterByName('salon') || ''
}

这假设您的 HTML 定义了如下元素:<span class="salon-class"></span>

【讨论】:

  • 我已尝试在此处插入您的代码 function getParameterByName(name, 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, ' ')); } var elements = document.getElementsByClassName('salon-class') for (var element of elements) { element.innerText = getParamterByName('salon') || '' } 但无法正常工作。我不擅长 js - 抱歉
  • 我看到我的答案中有错字(“getParamterByName”与“getParameterByName”),已复制到您的代码中。如果修复后仍然存在问题,我们必须查看您收到的错误消息。
  • 解决了 - 非常感谢!有什么地方可以插入默认文本吗?如果有人在没有 URL 参数的情况下点击链接?
  • 您可以使用我在其中添加的|| '' 技巧提供默认文本;只需将 '' 替换为您的默认值即可。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-12-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多