javascript - 显示解析的 URL 值
问题描述
在将头撞在屏幕上几个小时后,我被卡住了。我希望有更多知识的人可以帮助我。我的最终目标是获取解析后的 URL 参数并将它们显示在我的 Wordpress 页面的正文中。示例 URL 可能是“www.urlexample.com/?var1=red&var2=shoes”。
如果我检查我的页面,我可以在会话存储中看到键/值对显示。例如,我会看到带有 value="red" 的 key="var1"。所以这意味着这意味着javascript正在工作。现在如何在我的页面正文中显示它?例如; “你最喜欢的颜色是红色”(红色是 var1)
<!-- URL Parse Code -->
<script>
var queryForm = function(settings) {
var reset = settings && settings.reset ? settings.reset : false;
var self = window.location.toString();
var querystring = self.split("?");
if (querystring.length > 1) {
var pairs = querystring[1].split("&");
for (i in pairs) {
var keyval = pairs[i].split("=");
if (reset || sessionStorage.getItem(keyval[0]) === null) {
sessionStorage.setItem(keyval[0], keyval[1]);
}
}
}
var hiddenFields = document.querySelectorAll("input[type=hidden]");
for (var i=0; i<hiddenFields.length; i++) {
var param = sessionStorage.getItem(hiddenFields[i].name);
if (param) document.getElementById(hiddenFields[i].name).value = param;
}
}
queryForm();
</script>
<!-- URL Parse Code -->
解决方案
不确定这是否是您在 Brett 上面的问题中提出的问题。
const EnteringURL = 'https://example.com/?campaign=vcampaign&src=vsrc';
// const urlObject = new URL(EnteringURL);
// const host = urlObject.host;
// const href = urlObject.href console.log(host) console.log(href) let url = new URL(EnteringURL);
// let params = new URLSearchParams(url.search.slice(1));
// console.log(url.searchParams.get('campaign'));
const mapParams = (p) => Array.from(p.keys()).map(k => `<li>${k} - ${p.get(k)}</li>`).join('');
const mapLoad = (url) => {
const { host, href, search } = new URL(url);
const params = new URLSearchParams(search.slice(1));
document.querySelector('.mapped').innerHTML = `
<div class="url">URL - ${href}</div>
<div class="host">HOST - ${host}</div>
<div class="href">SEARCH - ${search}</div>
<ul class="params">
${mapParams(params)}
</ul>
`;
};
const loadIntoHTML = (url) => {
const { host, href, search } = new URL(url);
const params = new URLSearchParams(search.slice(1));
document.querySelector('.href').innerHTML = encodeURI(href);
document.querySelector('.host').innerHTML = host;
document.querySelector('.search').innerHTML = search;
document.querySelector('.params').innerHTML = mapParams(params);
};
const loadIntoHiddenForm = (url) => {
const { host, href, search } = new URL(url);
const params = new URLSearchParams(search.slice(1));
const campaign = params.get('campaign');
const src = params.get('src');
document.querySelector('#href').value = encodeURI(href);
document.querySelector('#host').value = host;
document.querySelector('#search-params-campaign').value = campaign;
document.querySelector('#search-params-src').value = src;
};
document.querySelector('.show').addEventListener('click', () => {
document.querySelector('.hidden-fields').classList.toggle('hide');
});
loadIntoHiddenForm(EnteringURL);
loadIntoHTML(EnteringURL);
mapLoad(EnteringURL);
.hidden-fields, .mapped, .loaded {
border: 2px solid #000;
border-radius: 7px;
margin-bottom: 2rem;
}
.hidden-fields input[type="text"] {
display: block;
font-weight: bold;
margin: 0.25rem;
min-width: 375px;
}
.hide {
display: none;
}
<h2 class="show">Hidden Forms Fields (Click to show)</h2>
<div class="hidden-fields hide">
<input type="text" id="href" />
<input type="text" id="host" />
<input type="text" id="search-params-campaign" />
<input type="text" id="search-params-src" />
</div>
<h2>Build the HTML</h2>
<div class="mapped">
</div>
<h2>Load into HTML</h2>
<div class="loaded">
<div class="href"></div>
<div class="host"></div>
<div class="search"></div>
<ul class="params">
</ul>
</div>
推荐阅读
- python - 在 Tensorflow 中沿指定维度恰好选择一个元素
- ruby-on-rails - Active Storage 以单独的方式为每条记录存储多个附件?
- javascript - 如何通过代码拼写检查将所有未知单词添加到字典中,或者当语言不是英语时忽略它们?
- node.js - 错误:使用原子查询时在 Postgres 中检测到死锁
- linux - 努力连接到 ubuntu/linux 中的 postgres-12 数据库服务器
- java - Java Swing 的 TableModel getValueAt 职责
- .net - 使用 SAP Connector for Microsoft .NET 使用 Powershell 登录 SAP
- python - 如何获取使用 tensorflow 2 检测到的最佳对象的坐标?
- azure - 跨多个 CosmosDB 文档获取唯一数组值
- ruby-on-rails - Rails - 为 config_for 方法启用深度合并?