0

I'm trying to replace link parameters with the query strings and I'm a noob when it comes to web dev

I've tried String(), object.textContent() and some more things but can't seem to get what I want

here's my code:

link="https://someWebsite?phone=replace1&message=replace2"
link = link.replace("replace1",phone); //phone is an input box returned by document.getElementByID() method
link = link.replace("replace2",message); //message is a text area returned by document.getElementByID() method


expected link: https://someWebsite?phone=123456&mesaage=somemessage
actual link: https://someWebsite?phone= [object HTMLInputElement]&message=[object HTMLTextAreaElement]
Raj Patel
  • 13
  • 2
  • 1
    Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) *"I've tried String(), object.textContent() and some more things"* **Show us** the code you've tried, exactly, with copy and paste. It's best to update your question with a [mcve] demonstrating the problem. – T.J. Crowder May 24 '19 at 15:57
  • (In particular, you were on the right track with `textContent` **if** the elements are not inputs; otherwise, you'd want `value`.) – T.J. Crowder May 24 '19 at 15:57
  • It sounds like `phone` and `message` are `input` objects. Try `phone.value` and `message.value`. – Austin Mullins May 24 '19 at 15:58
  • 2
    T.J. SO needs a button so we can all add exactly your comment. – Diodeus - James MacFarlane May 24 '19 at 15:59
  • @AustinMullins Thank you! phone.value and message.value did the job. – Raj Patel May 24 '19 at 16:02

2 Answers2

2

To get the value of an input, you use its value. Also, in query strings, you must encode query parameters with encodeURIComponent¹. So:

link="https://someWebsite?phone=replace1&message=replace2"
link = link.replace("replace1",encodeURIComponent(phone.value));
link = link.replace("replace2",encodeURIComponent(message.value));

Also note that each of those will replace the first occurrence, not all occurrences. See this question's answers if you need to replace each of those (replace1, replace2) in more than just the first place it appears.

Of course, with the code you've shown, it would make more sense not to use replace at all:

link = "https://someWebsite?phone=" + encodeURIComponent(phone.value) +
       "&message=" + encodeURIComponent(message.value);

Or with ES2015+:

link = `https://someWebsite?phone=${encodeURIComponent(phone.value)}&message=${encodeURIComponent(message.value)}`;

¹ You have to encode the names, too, but encodeURIComponent("phone") is "phone" and encodeURIComponent("message") is "message", so... But if you had other characters in there, such as [], you'd need to encode them.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

In jQuery we use backticks and ${} for string interpolation:

`some text ${replacedtext} some other text`

If you're using vanilla javascript use + signs for string interpolation:

"some text" + replacedtext + "some other text"

Hope this helps

ayang726
  • 61
  • 4