如何基于URL参数对象为表单前置创建带属性的输入元素？

嘿，我一眼就瞅到问题所在了——你写的jQuery代码里少了一个闭合括号，这就是导致语法报错的核心原因！咱们一步步把它解决：

1. 修正后的完整可运行代码 #

先把循环里的语法漏洞补上，同时建议给property加上let声明避免全局变量污染，修正后的代码如下：

// 原有URL参数解析代码
var urlParams = location.search.substring(1);
let parameters = JSON.parse('{"' + urlParams.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) });

// 修正后的循环生成input代码
for (let property in parameters) {
    // 只遍历对象自身属性，避免原型链上的意外属性干扰
    if (parameters.hasOwnProperty(property)) {
        $('<input>', {
            type: 'text',
            id: `${property}`,
            name: `${property}`,
            value: `${parameters[property]}`
        }).prependTo('form'); // 补全了$()调用的闭合括号
    }
}

2. 错误原因拆解 #

你原来的代码里，创建jQuery对象的$('<input>', { ... })语句没写完——在配置对象的}之后，你直接调用了.prependTo('form')，但漏掉了闭合$()的)，浏览器没法识别完整的jQuery调用，自然会抛出语法错误。

3. 更可靠的URL参数解析优化方案（可选） #

你当前用正则替换解析参数的方式，在遇到参数值包含&或"这类特殊字符时容易出问题，推荐用浏览器原生的URLSearchParams API，更安全简洁：

const params = new URLSearchParams(location.search);
let parameters = {};
for (const [key, value] of params.entries()) {
    parameters[key] = decodeURIComponent(value);
}

这个原生API能完美处理各种边缘场景，代码可读性也更强。

验证效果 #

当你的URL是/test-form?utm_source=sig&utm_medium=email&utm_content=comm时，以上代码会精准生成你预期的input结构：

<input type="text" id="utm_source" name="utm_source" value="sig">
<input type="text" id="utm_medium" name="utm_medium" value="email">
<input type="text" id="utm_content" name="utm_content" value="comm">

内容的提问来源于stack exchange，提问作者Nick