jQuery 实现输入数字自动批量生成列表项（含文本提取与重复渲染）-html教程-PHP中文网

jQuery 实现输入数字自动批量生成列表项（含文本提取与重复渲染）

本文详解如何使用 jQuery 从输入框中提取数字与文本，按数字次数动态生成对应数量的列表项，并插入到中，避免页面刷新，支持回车触发，兼顾健壮性与语义清晰性。

本文详解如何使用 jquery 从输入框中提取数字与文本，按数字次数动态生成对应数量的 `

` 列表项，并插入到 `

在实际前端开发中，常需将用户输入的“数量+描述”组合（如 3 eggs、5 apples）解析为结构化操作：提取数字作为重复次数，提取非数字部分作为内容模板，再批量渲染为 DOM 列表项。jQuery 提供了简洁的事件绑定、DOM 操作和字符串处理能力，非常适合实现此类交互。

以下是一个完整、健壮且可直接运行的解决方案：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 核心逻辑说明

使用正则 /(\d+)\s*(.+)/ 精准匹配「数字 + 可选空格 + 文本」结构（比仅用 \d+ 更安全，避免误匹配中间数字）；
若未输入数字，默认生成 1 项（提升用户体验）；
使用 keyup 监听回车（Enter 键），并配合 .trim() 防止空格干扰；
每次添加后清空输入框，避免重复提交；
列表项内容自动首字母大写（text-transform: capitalize），增强可读性。

? 完整 HTML + jQuery 示例代码



  <meta charset="UTF-8"><title>数字驱动列表生成器</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>
    ul { margin-top: 1rem; padding-left: 1.5rem; }
    li { margin: 0.25rem 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI'; }
  </style><input type="text" id="txtNaam" placeholder="例如：3 eggs、7 bananas（支持中英文）" autocomplete="off"><div id="divResult"></div>

`); } // 清空输入框，准备下一次输入 $input.val(''); } }); });

⚠️ 注意事项与优化建议

兼容性：本方案兼容 jQuery 3.x+，无需额外 polyfill；若项目使用较新版本（如 jQuery 4），注意 .on('keypress') 在某些浏览器中已被 .on('keydown') 替代，可统一改用 keydown 并判断 e.key === 'Enter'。
防重复提交：当前逻辑未禁用按钮或加 loading 状态，如需高并发场景防护，可添加 disabled 属性或节流（throttle）控制。
内容清洗：示例中未做 XSS 过滤。若内容来自不可信来源，务必对 content 做 HTML 转义（如使用 $.text(content) 创建文本节点，而非内联模板字符串）。
扩展方向：
- 支持删除最后一组项（添加「撤销」按钮）；
- 将生成项存入数组并支持排序/筛选；
- 结合 serializeArray() 将所有 <li> 内容导出为 JSON 数据。

该方案以最小侵入方式达成需求目标——输入即生成，语义清晰，逻辑自洽，开箱即用，是 jQuery 动态列表交互的典型实践范式。