javascript - 如何用文本内容替换 html 对象？

Question

我正在尝试用查询字符串替换链接参数，但在网络开发方面我是个菜鸟

我尝试过 String()、object.textContent() 和其他一些方法，但似乎无法得到我想要的

这是我的代码:

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]

Answer 1

要获取输入的值，您可以使用其值。此外，在查询字符串中，您必须使用 encodeURIComponent1 对查询参数进行编码。所以:

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

另请注意，其中每个都将替换第一个出现的情况，而不是所有出现的情况。请参阅this question's answers如果您需要替换其中每一个(replace1、replace2)，而不仅仅是第一个出现的位置。

当然，根据您所显示的代码，根本不使用 replace 会更有意义:

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

或者使用 ES2015+:

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

<小时/>

¹ 您还必须对名称进行编码，但是 encodeURIComponent("phone") 是 "phone" 且 encodeURIComponent ("message") 是 "message"，所以...但是如果其中有其他字符，例如 []，则需要对它们进行编码。