当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 jQuery 根据选择器字符串动态填充 Input 框

使用 jQuery 根据选择器字符串动态填充 Input 框

2025-09-11 15:37:53 0浏览收藏

本文主要讲解如何使用 jQuery 技巧，高效地根据选择器字符串，动态填充 HTML input 框，避免传统循环赋值的低效。文章重点介绍了两种实现方法：一种是利用立即执行函数表达式 (IIFE)，另一种是使用变量存储选择器字符串。这两种方法都巧妙地运用正则表达式，从 jQuery 选择器中提取 input 框的 name 属性，进而从 JSON 数据中获取对应值并填充。通过示例代码，详细解析了如何利用 jQuery 选择器和正则表达式的配合，实现input框的动态赋值，提高前端开发效率和代码可维护性。阅读本文，您将掌握无需循环即可快速填充表单的实用技巧。

本文介绍了如何利用 jQuery 和 JavaScript，在不使用循环的情况下，根据 JSON 数据动态填充 HTML input 框。核心思路是利用正则表达式从 jQuery 选择器字符串中提取 input 框的 name 属性，然后根据 name 属性从 JSON 数据中获取对应的值，并将其赋值给 input 框。文章提供了两种实现方式，并附带了完整的示例代码。

动态填充 Input 框的两种方法

在前端开发中，经常需要根据后端返回的 JSON 数据动态填充 HTML 表单。如果数据量很大，手动为每个 input 框赋值显然效率低下。本文将介绍两种利用 jQuery 和 JavaScript 实现动态填充 input 框的方法，避免使用循环，提高代码的可读性和可维护性。

方法一：使用立即执行函数表达式 (IIFE)

这种方法的核心是利用立即执行函数表达式，将 jQuery 选择器作为参数传递给函数，然后在函数内部使用正则表达式提取 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]'));

代码解释：

data：包含需要填充到 input 框的数据的 JSON 对象。
(s => s.val(data[/=(\w+)\]/.exec(s.selector)[1]]))：这是一个立即执行函数表达式。
- s：是传递给函数的 jQuery 对象。
- s.selector：获取 jQuery 选择器字符串 (例如: "input[name=foobar]")。
- [/=(\w+)\]/.exec(s.selector)[1]：使用正则表达式从选择器字符串中提取 name 属性的值。正则表达式 /=(\w+)\]/ 匹配 name=属性值的模式，(\w+) 捕获属性值。
- data[/=(\w+)\]/.exec(s.selector)[1]]：使用提取的 name 属性值从 data 对象中获取对应的值。
- s.val(...)：将获取的值赋值给 input 框。
($('input[name=foobar]'))：将 jQuery 对象 $('input[name=foobar]') 作为参数传递给 IIFE。

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

这种方法将 jQuery 选择器字符串存储在一个变量中，然后使用该变量来获取 jQuery 对象，并提取 name 属性。

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]]);

代码解释：

var s = "input[name=foobar]";：将选择器字符串存储在变量 s 中。
$(s)：使用变量 s 创建 jQuery 对象。
data[/=(\w+)\]/.exec(s)[1]]：使用正则表达式从选择器字符串 s 中提取 name 属性的值，并从 data 对象中获取对应的值。
$(s).val(...)：将获取的值赋值给 input 框。

完整 HTML 示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Input Filling</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

  &lt;input name=&quot;foobar&quot; /&gt;
  &lt;input name=&quot;foo&quot; /&gt;
  &lt;input name=&quot;bar&quot; /&gt;

  <script>
    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]'));
  </script>

</body>
</html>

注意事项：