显示解析的 URL 值 [英] Display Parsed URL Value

问题描述

我的头撞在屏幕上几个小时后卡住了.我希望有更多知识的人可以帮助我.我的最终目标是获取解析后的 URL 参数并将它们显示在我的 Wordpress 页面的正文中.示例网址可能是www.urlexample.com/?var1=red&var2=shoes".

如果我检查我的页面，我可以在会话存储中看到键/值对显示.例如，我会看到 key="var1" 的 value="red".所以这意味着 javascript 正在工作.现在如何在我的页面正文中显示它?例如;你最喜欢的颜色是红色"(其中红色是 var1)

<脚本>var queryForm = 函数(设置){var reset = 设置 &&设置.重置?settings.reset : false;var self = window.location.toString();var querystring = self.split("?");if (querystring.length > 1) {var pair = querystring[1].split("&");对于(我成对){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<!-- URL 解析代码-->

解决方案

不确定这是否是您在 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 { 主机、href、搜索} = 新 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)}`;};const loadIntoHTML = (url) =>{const { 主机、href、搜索} = 新 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 { 主机、href、搜索} = 新 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 {边框:2px 实心 #000；边框半径:7px；底边距:2rem；}.hidden-fields 输入[type="text"] {显示:块；字体粗细:粗体；保证金:0.25rem；最小宽度:375px；}.隐藏 {显示:无；}

<h2 class="show">隐藏表单字段(点击显示)</h2><div class="隐藏字段隐藏"><input type="text" id="href"/><input type="text" id="host"/><input type="text" id="search-params-campaign"/><input type="text" id="search-params-src"/>

<h2>构建 HTML</h2><div class="mapped">

<h2>加载到 HTML</h2><div class="加载"><div class="href"></div><div class="host"></div><div class="search"></div><ul class="params">

I'm stuck after several hours of banging my head up against the screen. I'm hoping someone with more knowledge can help me out. My ultimate goal is to take the parsed URL parameters and display them in the body of my Wordpress page. An example URL maybe 'www.urlexample.com/?var1=red&var2=shoes'.

If I inspect my page, I can see in the session storage the key/value pair displaying. For example I would see key="var1" with a value="red". So to mean that means the javascript is working. Now how can I display this in the body of my page? For example; "You're favorite color is RED" (where red is 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 -->

解决方案

Not sure if this is what you are asking in the question above 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>

这篇关于显示解析的 URL 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！