我想使用链接中的参数为网页添加倒计时

Question

我们正在使用niftyimages在电子邮件上添加倒计时，并希望在我们的网页上使用倒计时。当个人点击从电子邮件到登录页的链接时，我们希望对其进行个性化设置。

那么，如果我们有一个链接：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"));

来自漂亮图像的图像是<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

为了保持代码的超级简单，您可以在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中的日期。可能有更巧妙的方法来执行regex，以防你可能有日期以外的东西，但这可能会让你大致了解你要做的事情。在旧日期的页面加载上可能会有一个图像闪烁，但一旦javascript执行，图像就会更新到新日期。如果你不想要flash，你会想在页面渲染之前在服务器端做一些事情，如果可以的话。

Answer 2

使用replace和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 3

刚开始，有更容易的事情要做。只需使用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}`)