使用 jQuery 动态填充 Input 框：避免循环的技巧

本文介绍了如何使用 jquery 和正则表达式，在不使用循环的情况下，根据 JSON 数据的键值动态填充 html input 框。核心在于利用正则表达式从 jQuery 选择器字符串中提取 input 框的 name 属性，并将其作为键来访问 json 数据，从而实现快速填充。文章提供了两种实现方式，并附带了示例代码，方便读者理解和应用。

动态填充 Input 框：无需循环的解决方案

在前端开发中，经常需要根据 JSON 数据动态填充 HTML 表单。一种常见的场景是将 JSON 对象的键值对填充到对应的 input 框中。如果 input 框数量较多，手动编写大量的赋值语句会显得冗余且效率低下。本文将介绍一种无需循环，利用 jQuery 和正则表达式实现动态填充的方法。

方法一：利用立即执行函数 (IIFE) 和正则表达式

这种方法的核心在于使用立即执行函数 (Immediately Invoked function Expression, IIFE) 结合正则表达式来提取 input 框的 name 属性，并将其作为键访问 JSON 数据。

let data = {     "foobar": "data foobar",     "foo": "data foo",     "bar": "data bar",     "baz": "data baz",     "qux": "data qux",     "quux": "data quux",     "corge": "data corge",     "grault": "data grault",     "garply": "data garply",     "waldo": "data waldo",     "fred": "data fred",     "plugh": "data plugh",     "xyzzy": "data xyzzy",     "thud": "data thud"   };  (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foobar]')); (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=foo]')); (s => s.val(data[/=(w+)]/.exec(s.selector)[1]]))($('input[name=bar]'));

代码解释：

1. data 是包含数据的 JSON 对象。
2. (s => s.val(data[/=(w+)]/.exec(s.selector)[1]])) 定义了一个立即执行函数，该函数接受一个 jQuery 对象作为参数 s。
3. s.selector 获取 jQuery 对象的选择器字符串，例如 ‘input[name=foobar]’。
4. [/=(w+)]/.exec(s.selector) 使用正则表达式提取 name 属性的值。 (/=(w+)]/ 是一个正则表达式，用于匹配 name 属性值，w+ 匹配一个或多个字母数字字符。 exec() 方法返回一个数组，其中第一个元素是匹配的字符串，第二个元素是捕获组（即 name 属性的值）。
5. [1] 访问捕获组中的第一个元素，即 name 属性的值，例如 ‘foobar’。
6. data[/=(w+)]/.exec(s.selector)[1]] 使用提取的 name 属性值作为键，从 data 对象中获取对应的值。
7. s.val(…) 将获取的值设置到对应的 input 框中。
8. ($(‘input[name=foobar]’)) 将 jQuery 对象 $(‘input[name=foobar]’) 作为参数传递给立即执行函数。

HTML 示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  <input name="foobar" /> <input name="foo" /> <input name="bar" />

方法二：使用变量存储选择器

为了提高代码的可读性，可以使用变量来存储选择器字符串。

let data = {     "foobar": "data foobar",     "foo": "data foo",     "bar": "data bar",     "baz": "data baz",     "qux": "data qux",     "quux": "data quux",     "corge": "data corge",     "grault": "data grault",     "garply": "data garply",     "waldo": "data waldo",     "fred": "data fred",     "plugh": "data plugh",     "xyzzy": "data xyzzy",     "thud": "data thud"   };  var s = "input[name=foobar]"; $(s).val(data[/=(w+)]/.exec(s)[1]]);  var s = "input[name=foo]"; $(s).val(data[/=(w+)]/.exec(s)[1]]);  var s = "input[name=bar]"; $(s).val(data[/=(w+)]/.exec(s)[1]]);

代码解释：

1. var s = “input[name=foobar]”; 将选择器字符串存储在变量 s 中。
2. $(s) 使用选择器字符串创建一个 jQuery 对象。
3. [/=(w+)]/.exec(s) 使用正则表达式提取 name 属性的值，与方法一类似。
4. $(s).val(data[/=(w+)]/.exec(s)[1]]); 将获取的值设置到对应的 input 框中。

HTML 示例：

与方法一相同。

注意事项

• 以上两种方法都依赖于 input 框的 name 属性与 JSON 对象的键相对应。
• 如果 input 框的 name 属性不符合正则表达式的匹配规则，则无法正确提取 name 属性的值。
• 此方法不适用于复杂的表单结构，例如嵌套的 JSON 对象。

总结

本文介绍了两种在不使用循环的情况下，利用 jQuery 和正则表达式动态填充 input 框的方法。这些方法可以简化代码，提高开发效率。然而，需要根据实际情况选择合适的方法，并注意相关的限制。在实际应用中，建议使用更健壮和灵活的数据绑定框架，例如 vue.js 或 React，以便更好地处理复杂的表单数据。