How to trim and process current url using jquery?

Question

Let's say I have my current url as: https://example.com/test?id=W2FiY11beHl6XVsxMjNd . The content after ?id is [abc][xyz][123] and is base64 encoded.

I want to process the current url so the content on the page looks like:

<div class="">abc</div>
<div class="">xyz</div>
<div class="">123</div>

Is there a way to do this with jquery or whatever?

Does this answer your question? [How can I get query string values in JavaScript?](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript) — Osama Bin Saleem, Jul 27 '21 at 07:04
*"The content after ?id is [abc][xyz][123] and is base64 encoded."* - Well... decode it, split it up, put it in your HTML. There is no question in this post (other than "please write this for me ...", and that's not a question) — Tomalak, Jul 27 '21 at 07:07
`Is there a way to do this with jquery or whatever?` ? yes, there is a way to do this with jquery or whatever. DOes this answer help you or whatever ? — Mihai T, Jul 27 '21 at 07:07
i don't know in jquery is there a function to decode base64 or do we have to use something else? — Thành Nan Nguyễn, Jul 27 '21 at 07:09

score 2 · Accepted Answer · answered Jul 27 '21 at 07:11

Vanilla JavaScript

const urlString = `https://example.com/test?id=W2FiY11beHl6XVsxMjNd` // The content after ?id is [abc][xyz][123] and is base64 encoded.

const url = new URL(urlString); // this could be location.href
const id = url.searchParams.get("id"); // get the ID
const html = [...atob(id).matchAll(/\[(\w+)\]/g)] // get the [...][...][...]
  .map(item => `<div class="">${item[1]}</div>`)  // map them to divs
  .join(""); // join with empty string
document.body.innerHTML += html; // do whatever you need with the HTML string

jQuery

const urlString = `https://example.com/test?id=W2FiY11beHl6XVsxMjNd` // The content after ?id is [abc][xyz][123] and is base64 encoded.

const url = new URL(urlString); // this could be location.href
const id = url.searchParams.get("id"); // get the ID
const html = [...atob(id).matchAll(/\[(\w+)\]/g)] // get the [...][...][...]
  .map(item => `<div class="">${item[1]}</div>`) // map them to divs
  .join(""); // join with empty string
$("body").append(html); // do whatever you need with the HTML string

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to trim and process current url using jquery?

1 Answers1