url encode/decode

by batcave

HTML

<div class="container-fe">
  <h2>Frontend</h2>

  <div class="value"><b>Value</b>: <span>.......</span></div>
  <div class="encode"><b>Encoded</b>: <span>.......</span></div>
  <div class="decode"><b>Decoded</b>: <span>.......</span></div>
</div>

<div class="container-be">
  <h2>Backend</h2>
  
  <div class="value"><b>Value</b>: <span>.......</span></div>
  <div class="encode"><b>Encoded</b>: <span>.......</span></div>
  <div class="decode"><b>Decoded</b>: <span>.......</span></div>
</div>

CSS

.js-click {
  padding: 1rem 2rem;
  background-color: lightgreen;
  border: 1px solid green;
}

span {
  display: inline-block;
  padding-left: 1rem;
}

JavaScript

/* frontend params */

const feValue = "hus-och-tradgardsmiljoer"
const feUrl = "hus-och-tradgardsmiljoer"

/* backend params */

const beValue = "hus och trädgård"
const beUrl = "hus%20och%20tr%C3%A4dg%C3%A5rd"

/* frontend url handling */

const feEncodeUrl = encodeURIComponent(feValue)
const feDecodeUrl = decodeURIComponent(feEncodeUrl)

/* backend url handling */

const beEncodeUrl = encodeURIComponent(beValue)
const beDecodeUrl = decodeURIComponent(beEncodeUrl)

/* frontend result */

document.querySelector('.container-fe .value span').textContent = feValue
document.querySelector('.container-fe .encode span').textContent = feEncodeUrl
document.querySelector('.container-fe .decode span').textContent = feDecodeUrl

/* backend result */

document.querySelector('.container-be .value span').textContent = beValue
document.querySelector('.container-be .encode span').textContent = beEncodeUrl
document.querySelector('.container-be .decode span').textContent = beDecodeUrl