Dynamic text based on URL parameters - html

Question

I'm building a website on Instapage and I have a form on the homepage with two fields: State & Practice Area. When a visitor submits his selections, he is redirected to another page with "area" and "state" as URL parameters.
All good so far, but now I want to write a paragraph on the page, let's just say "[practice area] in [state]", where the brackets would contain the corresponding information from the URL parameters. I'm guessing it would be a simple HTML code that replaces a parameter's name within the paragraph I'm writing with its description from the URL.
I also want to have a default text if there are no parameters in the URL.
Just to be clear, I'm trying to do all of this within the same paragraph, so most of the paragraph stays the same, and just a couple of words within it would change based on the parameters (or have a default value if there are no parameters).
Any help would be appreciated. Thank you!

Answer 1

If your URL is like this:
[protocol]://[hostname]/[state]/[practice area]
You can get the state and practice like this:
let state = window.location.pathname.split('/')[1] || 'your default value for state'
let practiceArea = window.location.pathname.split('/')[2] || 'your default value for practice area'
p = document.getElementById('text')
p.innerText = `${state} in ${practiceArea}`
<p id='text'></p>
Update
If your URL is like this:
"[protocol]://[hostname]/?state=statevalue&practiceArea=practiceValue"
You can get the state and practice like this:
var urlParams = new URLSearchParams(window.location.search)
let state = urlParams.get('state') || 'your default value for state'
let practiceArea = urlParams.get('practiceArea') || 'your default value for practice area'
let p = document.getElementById('text')
p.innerText = `${state} in ${practiceArea}`
<p id='text'></p>