我想使用 link 中的参数向网页添加倒计时

Question

我们正在使用 niftyimages 在我们的电子邮件中添加倒计时，并希望在我们的网页上使用倒计时。当他们点击从电子邮件到登陆页面的 link 时，我们希望将其个性化。

所以如果我们有 link：www.webpage.com?dt=2021-06-01

我试过这段代码：

function getAllUrlParams(url) {

  // get query string from url (optional) or window
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // we'll store the parameters here
  var obj = {};

  // if query string exists
  if (queryString) {

  // stuff after # is not part of query string, so get rid of it
  queryString = queryString.split('#')[0];

  // split our query string into its component parts
  var arr = queryString.split('&');

  for (var i = 0; i < arr.length; i++) {
    // separate the keys and the values
    var a = arr[i].split('=');

    // set parameter name and value (use 'true' if empty)
    var paramName = a[0];
    var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

    // (optional) keep case consistent
    paramName = paramName.toLowerCase();
    if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

    // if the paramName ends with square brackets, e.g. colors[] or colors[2]
    if (paramName.match(/\[(\d+)?\]$/)) {

      // create key if it doesn't exist
      var key = paramName.replace(/\[(\d+)?\]/, '');
      if (!obj[key]) obj[key] = [];

      // if it's an indexed array e.g. colors[2]
      if (paramName.match(/\[\d+\]$/)) {
        // get the index value and add the entry at the appropriate position
        var index = /\[(\d+)\]/.exec(paramName)[1];
        obj[key][index] = paramValue;
      } else {
        // otherwise add the value to the end of the array
        obj[key].push(paramValue);
      }
    } else {
      // we're dealing with a string
      if (!obj[paramName]) {
        // if it doesn't exist, create property
        obj[paramName] = paramValue;
      } else if (obj[paramName] && typeof obj[paramName] === 'string'){
        // if property does exist and it's a string, convert it to an array
        obj[paramName] = [obj[paramName]];
        obj[paramName].push(paramValue);
      } else {
        // otherwise add the property
        obj[paramName].push(paramValue);
      }
    }
  }
}

return obj;
} 

console.log(getAllUrlParams("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd"));

来自 niftyimages 的图像是 <img src="https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd" />

我已经分离出 dt=2021-06-01，我该如何替换图像中的“dt=2021-07-21”部分 url？

Answer 1

如何使用 replace and template ${literals}.

function getAllUrlParams(url) {

  // get query string from url (optional) or window
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // we'll store the parameters here
  var obj = {};

  // if query string exists
  if (queryString) {

  // stuff after # is not part of query string, so get rid of it
  queryString = queryString.split('#')[0];

  // split our query string into its component parts
  var arr = queryString.split('&');

  for (var i = 0; i < arr.length; i++) {
    // separate the keys and the values
    var a = arr[i].split('=');

    // set parameter name and value (use 'true' if empty)
    var paramName = a[0];
    var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

    // (optional) keep case consistent
    paramName = paramName.toLowerCase();
    if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

    // if the paramName ends with square brackets, e.g. colors[] or colors[2]
    if (paramName.match(/\[(\d+)?\]$/)) {

      // create key if it doesn't exist
      var key = paramName.replace(/\[(\d+)?\]/, '');
      if (!obj[key]) obj[key] = [];

      // if it's an indexed array e.g. colors[2]
      if (paramName.match(/\[\d+\]$/)) {
        // get the index value and add the entry at the appropriate position
        var index = /\[(\d+)\]/.exec(paramName)[1];
        obj[key][index] = paramValue;
      } else {
        // otherwise add the value to the end of the array
        obj[key].push(paramValue);
      }
    } else {
      // we're dealing with a string
      if (!obj[paramName]) {
        // if it doesn't exist, create property
        obj[paramName] = paramValue;
      } else if (obj[paramName] && typeof obj[paramName] === 'string'){
        // if property does exist and it's a string, convert it to an array
        obj[paramName] = [obj[paramName]];
        obj[paramName].push(paramValue);
      } else {
        // otherwise add the property
        obj[paramName].push(paramValue);
      }
    }
  }
}

return obj;
} 

function replace_url_param(url, param, replacement)
{
  let params = getAllUrlParams(url);
  return url.replace(`${param}=${params[param]}`, `${param}=${replacement}`)
}

let image = document.getElementById('image');
image.addEventListener('mouseover', function() {
  image.src = replace_url_param("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd", 'dt', '2021-06-05');
});

console.log(replace_url_param("https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd", 'dt', '2021-06-05'));

<img src="https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd" id="image">

Answer 2

刚开始，还有更容易做的事情。只需使用 URL API

示例代码

var URL_val = "https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd"
  , URL_Obj = new URL(URL_val)
  ;
for (let [name,value] of URL_Obj.searchParams)
  {
  console.log(`_.name: ${name}, _.val: ${value}`)
  }
  

let dateParam = URL_Obj.searchParams.get('dt') 
console.log(`dateParam: ${dateParam}`)

Answer 3

为了让您的代码超级简单，您可以像这样向您的 img 标签添加一个 id：

<img id="niftyImg" src="nifty.com?dt=2021-05-02" />

然后为你的 JS 做这样的事情：

document.addEventListener("DOMContentLoaded", function(event){
  var url = new URL(window.location.href);
  var dt = url.searchParams.get("dt");
  var element = document.getElementById("niftyImg");
  var regex = /[0-9]+-[0-9]+-[0-9]+/gm;
  element.src = element.src.replace(regex, dt);
});

它所做的是等待 DOM 完成加载，然后从 url 中获取查询参数，在页面上找到您的图片标签并将 src 属性中的日期替换为url 中的一个。可能有更巧妙的方法来执行正则表达式，以防万一您在那里有日期以外的其他内容，但这可能会让您大致了解您要尝试做的事情。旧日期的页面加载时可能会出现图像闪烁，但一旦 javascript 执行，图像将更新为新日期。如果你不想要那个 flash，你会想在呈现页面之前在服务器端做一些事情，如果这是一个选项的话。

我想使用 link 中的参数向网页添加倒计时

I want to add a countdown to a webpage using an parameter from a link

javascript

countdown