javascript - 我想使用链接中的参数向网页添加倒计时
问题描述
我们正在使用 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"));
来自 niftyimages 的图像是<img src="https://img1.niftyimages.com/q24/9jso/fjad?dt=2021-07-21&format=yyyy-MM-dd" />
我已经隔离了 dt=2021-06-01,如何替换图片 url 中的“dt=2021-07-21”部分?
解决方案
如何使用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">
推荐阅读
- sql - 自愈 SQL 表可能吗?
- java - @Service @Controller @Repository 的 Java Spring 错误:创建 bean 时出错
- flutter - 如何使用 Flutter 在 Android Studio 中禁用警告
- c - 如何在C中调用引号/字符串内的变量?
- python - 如何在 google colab 中使用 tensorflow 1.6.0,或者如何在 colab 中使用 yolo v3 keras
- powershell - 如何使用 PowerSell 获取类提供的验证参数类
- python - 最终确定和汇总结果时出错
- json - Django Mongodb 转储数据不是有效的 json 格式
- telegram-bot - 为什么 Telegram 在 webhook 上给我一个空的 POST 请求?
- java - 如何以编程方式在 Android 的 LinearLayout 的顶部中心绘制一个圆圈?