Display Parsed URL Value

问题

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 -->

回答1:

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>

回答2:

If the variables and values are in the session storage:

var el = document.getElementById('elementid'); /// get the element on body by its id. 
el.innerHTML = sessionStorage.getItem('key'); /// get the value by key and set the text in the element

https://codepen.io/fernandosiebra/pen/NWPPjoO

来源：https://stackoverflow.com/questions/59166051/display-parsed-url-value