如何使用jQuery限制输入值并拆分保存name=value格式内容？

嘿，作为jQuery新手碰到这个需求很正常，我来给你梳理清晰的解决方向，一步步来就好！

第一步：先搞定输入格式验证 + 空格处理 #

首先，咱们得先把输入内容的首尾空格去掉，用trim()就很方便。接下来要验证输入是否符合name=value的核心格式——关键是要确保有且仅有一个有效的=，且=两侧都有实际内容（允许=前后有空格，但不能只有空格或者空内容）。

这里用正则表达式来验证是最靠谱的，比如这个正则：

const formatRegex = /^(.+?)\s*=\s*(.+)$/;

• ^和$确保匹配整个输入内容，避免部分匹配；
• (.+?)是非贪婪匹配，用来捕获=左侧的内容（会自动停在第一个=周围的空格前）；
• \s*=\s*匹配=以及它前后任意数量的空格；
• (.+)捕获=右侧的所有内容（包括空格甚至=，如果你的需求允许value里带=的话）。

验证的逻辑很简单：

const inputVal = $('#yourInputId').val().trim();
if (!formatRegex.test(inputVal)) {
  alert('请输入符合「name=value」格式的内容哦，=两侧得有有效内容！');
  return;
}

第二步：拆分name和value #

验证通过后，咱们就可以用同一个正则来提取name和value了，比用split()靠谱多——毕竟如果value里包含=的话，split()会把value拆碎，而正则捕获组能精准拿到第一个=两侧的内容：

const [, rawName, rawValue] = inputVal.match(formatRegex);
// 保险起见，再给name和value单独trim一次，确保没有多余空格
const name = rawName.trim();
const value = rawValue.trim();

这里的[, rawName, rawValue]是解构赋值，正则匹配后返回的数组里，第一个元素是整个匹配的字符串，第二个是捕获的name，第三个是捕获的value。

第三步：排序处理 #

把每次拆分好的name和value存到一个数组里，比如：

// 全局或者局部维护一个数组来存储所有项
let itemsList = [];
// 验证拆分后push进去
itemsList.push({ name: name, value: value });

然后用数组的sort()方法按name排序就行，用localeCompare()能处理中英文等各种字符的排序：

itemsList.sort((a, b) => a.name.localeCompare(b.name));

完整的jQuery示例代码 #

给你整合一个完整的示例，方便你直接参考：

// 获取输入框和按钮元素
const $input = $('#inputBox');
const $addBtn = $('#addItemBtn');
// 存储所有项的数组
let itemsList = [];

$addBtn.on('click', function() {
  const inputVal = $input.val().trim();
  if (!inputVal) {
    alert('请输入内容哦！');
    return;
  }

  const formatRegex = /^(.+?)\s*=\s*(.+)$/;
  if (!formatRegex.test(inputVal)) {
    alert('格式不对，请输入「name=value」样式的内容，=两侧要有有效内容！');
    $input.val('');
    return;
  }

  // 拆分name和value
  const [, rawName, rawValue] = inputVal.match(formatRegex);
  const cleanItem = {
    name: rawName.trim(),
    value: rawValue.trim()
  };

  // 添加到数组并排序
  itemsList.push(cleanItem);
  itemsList.sort((a, b) => a.name.localeCompare(b.name));

  // 可以在这里把排序后的列表渲染到页面，比如：
  $('#sortedList').empty();
  itemsList.forEach(item => {
    $('#sortedList').append(`<li>${item.name} = ${item.value}</li>`);
  });

  // 清空输入框
  $input.val('');
});

这样一套流程下来，从验证、拆分到排序就都搞定啦～如果还有特殊需求（比如name不能包含空格），只需要调整正则里的捕获规则就行。

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