How to change a string of text with Javascript based on URL search params?

Question

I have a URL that I want to link to with a few different URLSearchParams that will update a string of text within the HTML.

My URLs will be like:

example.com?code=GreenMonkey
example.com?code=PinkPanda
example.com?code=BlueCat

Then I will have some JS in the HTML:

const params = new URL('https://example.com?code=GreenMonkey').searchParams;
params.get('code');

Then I want to change a string of text within the HTML:

<div class="code">Change this text based on the 'code' param.</div>

For example:

If 'code' param = GreenMonkey > change string to "Hello world"
If 'code' param = PinkPanda > change string to "Goodbye world"
If 'code' param = BlueCat > change string to "Aloha world"

I'm stuck on how to achieve the last part. Any direction would be appreciated!

charlietfl · Accepted Answer · 2021-03-31 23:48:07Z

2

Set up a hashtable object using same keys as in url.

const dict = {
  GreenMonkey: "Hello world",
  PinkPanda: "Goodbye world"
}


const params = new URL('https://example.com?code=GreenMonkey').searchParams,
      key = params.get('code');
  
document.querySelector('.code').textContent = dict[key]

<div class="code">Change this text based on the 'code' param.</div>

answered Mar 31, 2021 at 23:48

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DecPK · Accepted Answer · 2021-03-31 23:52:41Z

1

Create an object that contains the key-value of the code then fetch and replace it using string literal.

const params = new URL("https://example.com?code=GreenMonkey").searchParams;
const code = params.get("code");

const codeElement = document.querySelector(".code");

function changeCode(element, code) {
  const codeStringObj = {
    GreenMonkey: "Hello World",
    PinkPanda: "Goodbye world",
    BlueCat: "Aloha world"
  }

  element.textContent = `change ${codeStringObj[code]} text based on the 'code' param`;
}

changeCode(codeElement, code);

<div class="code">Change this text based on the 'code' param.</div>

answered Mar 31, 2021 at 23:52

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

rzlvmp · Accepted Answer · 2021-04-01 00:46:07Z

0

const params = new URL("https://example.com?code=GreenMonkey").searchParams;
const code = params.get("code");
let new_text = null;

switch(code) {
  case 'GreenMonkey':
    new_text = 'Hello World';
    break;
  case 'PinkPanda':
    new_text = 'Goodbye world';
    break;
  case 'BlueCat':
    new_text = 'Aloha world';
    break;
  default:
    new_text = '';
}

document.querySelector(".code").textContent = new_text;

<div class="code">Change this text based on the 'code' param.</div>

answered Apr 1, 2021 at 0:46

rzlvmp

9,8646 gold badges36 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to change a string of text with Javascript based on URL search params?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related